Webpack not transforming SCSS (ExtractTextPlugin)

Question

I am having trouble getting webpack (2.2.1) to compile my .scss (main.scss) files to css files. All the correct source files are there, however no css output is created.

I have looked at a tonne of different guides and they've all seemed to get it working with a setup similar to mine.

The thing to remember is that I am running webpack with webpack --debug --display-error-details --watch and there are no errors (just no css output).

My webpack config looks like this:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: [
        './src/app.js'
    ],
    output: {
        path: 'dist/static/scripts',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: { presets: [ 'es2015', 'react' ] }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/static/styles/[name].css',
            allChunks: true
        })
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    },
};

The directory structure is like so:

dist/
    static/
        scripts/
        styles/
node_modules/
src/
    actions/
    components/
    constants/
    containers/
    lib/
    reducers/
    scss/
        main.scss
    store/
    app.js
package.json
webpack.config.js

and the output from webpack's watching is this

Hash: 46d75c2b162f5e746664
Version: webpack 2.2.1
Time: 1675ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  831 kB       0  [emitted]  [big]  main
  [12] ./~/react/react.js 56 bytes {0} [built]
  [20] ./~/react/lib/React.js 2.69 kB {0} [built]
  [27] ./~/redux/es/index.js 1.08 kB {0} [built]
  [34] ./~/react-redux/es/index.js 194 bytes {0} [built]
  [96] ./src/app.js 780 bytes {0} [built]
 [104] ./src/containers/App.js 980 bytes {0} [built]
 [105] ./src/containers/ChoiceContainer.js 1.18 kB {0} [built]
 [106] ./src/containers/ResultContainer.js 623 bytes {0} [built]
 [107] ./src/containers/TimeContainer.js 1.15 kB {0} [built]
 [109] ./src/reducers/Reducers.js 583 bytes {0} [built]
 [111] ./src/store/SleepStore.js 378 bytes {0} [built]
 [136] ./~/react-dom/index.js 59 bytes {0} [built]
 [150] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
 [209] ./~/react-redux/es/connect/connect.js 5.34 kB {0} [built]
 [235] multi ./src/app.js 28 bytes {0} [built]
    + 221 hidden modules
✨  Done in 2.26s.

So for some strange reason the scss file isn't even being considered or watched despite the correct module-loader test in the webpack configuration. ExtractTextPlugin seems to be correctly configured and changes to it's set up will throw errors.

Can someone help understand why this isn't working?

Answer 1

You have to require/import your scss module in app.js.