Webpack not compiling sass files

Question

I'm trying to compile all my .scss files but webpack doesn't seem to be doing it, even though I've declared style-loader & sass-loader in my webpack config file.

I don't see why the .scss files wouldn't compile? I've followed a guide from the following blog: http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Loaders:

loaders: [
            // Working loaders...
            {test: /\.json$/, loaders: ["json"]},
            {test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/, loaders: ["file?context=static&name=/[path][name].[ext]"], exclude: /node_modules/},
            {test: /\.js$/, loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"], exclude: /node_modules/},
            
            // Non working loaders...
            // ALSO TRIED THIS -> { test: /\.scss$/,loader: ExtractTextPlugin.extract( "style", 'css!sass')}
            { test: /\.css$/, loader: ExtractTextPlugin.extract(
                "style-loader",
                "sass-loader?sourceMap",
                {
                    publicPath: "../dist"
                }
            )},

],

style.css is never generated anywhere.

Plugins:

plugins: [
    new ExtractTextPlugin("style.css", {
       disable: false,
       allChunks: true
    }),
]

Also tried:

The following was copied from the blog I linked above.

Loaders:

  {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('css!sass')
  }

Plugins:

new ExtractTextPlugin('public/style.css', {
     allChunks: true
 })

Other webpack configs:

Here are my other configurations. Pretty standard and do the job for everything except the .scss!

target:  "node",
    cache:   false,
    context: __dirname,
    debug:   false,
    devtool: "source-map",
    entry:   ["../src/server"],
    output:  {
        path:          path.join(__dirname, "../dist"),
        filename:      "server.js"
    },
externals: [nodeExternals({
        whitelist: ["webpack/hot/poll?1000"]
    })],
    resolve: {
        modulesDirectories: [
            "src",
            "src/components",
            "src/containers",
            "node_modules",
            "static"
        ],
        extensions: ["", ".json", ".js"]
    },
    node:    {
        __dirname: true,
        fs:        "empty"
    }

Here is what my webpack terminal is printing out after I run it:

Waiting for dist/*.js (max 30 seconds)
[2] http://localhost:8080/webpack-dev-server/
[2] webpack result is served from http://localhost:8080/dist
[2] content is served from /Users/james/apps/react-server-side/server
[0] Ready. dist/*.js changed
[1] Hash: 12a5c90bd2564cd8880d
[1] Version: webpack 1.12.14
[1] Time: 15448ms
[1]         Asset     Size  Chunks             Chunk Names
[1]     server.js  1.37 MB       0  [emitted]  main
[1] server.js.map  1.23 MB       0  [emitted]  main
[1]    [0] multi main 40 bytes {0} [built]
[1]     + 659 hidden modules

Does anyone have any ideas to what is going on?!

Edit

Forgot to add that I'm doing this server side!

Answer 1

Are you requiring the scss files in your js files? You have to do that.

Also, you don't need the ExtractTextPlugin, a config as the following should work:

loaders: [
  // ...
  {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
  }
]