CODEWITHSUNDEEP
webpacksass
Sergio Tapia
Sergio Tapia

Reputation: 9823

Compiling SASS with Webpack 3

I have a simple file called app.scss that I want to compile to css named app.css.

/web/static/stylesheets/app.scss

Compiles to...

/priv/static/css/app.css

Here's my webpack.config.

const path = require("path");

module.exports = [
  {
    entry: "./web/static/js/app.js",
    output: {
      path: path.resolve(__dirname, "priv/static/js"),
      filename: "app.js"
    },
    resolve: {
      modules: ["node_modules", __dirname + "/web/static/js"]
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: {
            presets: ["env"]
          }
        }
      ]
    }
  },
  {
    entry: "./web/static/stylesheets/app.scss",
    output: {
      path: path.resolve(__dirname, "priv/static/css"),
      filename: "app.css"
    },
    resolve: {
      modules: ["node_modules"]
    },
    module: {
      loaders: [
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "style-loader"
            },
            {
              loader: "css-loader"
            },
            {
              loader: "sass-loader"
            }
          ]
        }
      ]
    }
  }
];

The file compiles with no errors, but the content inside app.css is incorrect.

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
... and so on.

Any suggestions on where I'm misconfiguring webpack?

Upvotes: 1

Views: 2133

Answers (1)

Eric Claeren
Eric Claeren

Reputation: 11

Have the same issue, it seems to work when you use the ExtractTextPlugin and make the filename in the path exactly the same as the output name in ExtractTextPlugin.

output: {
  path: resolve("assets"),
  filename: './css/[name].css',
}
plugins: [
  new ExtractTextPlugin('./css/[name].css', {
    allChunks: true,
  }),
]

I first named the filename css/[name].css in the ExtractTextPlugin section and then got the same result as you with a piece of JS in the .css file.

Hope this helps.

Upvotes: 1

Related Questions