Webpack - After compiling sass, the resulting css is the same as the scss file

Question

I am struggling with an issue related to compiling sass to css with webpack. After compiling the scss file by webpack, the resulting css is the same as the scss file where the scss file is one of the entry point. It means somehow sass-loader fails to run, while there are no error message about it. I am not sure what's wrong with my setup. I have tried with Window 7 and Ubuntu 15 and the issue persists

main.js

import 'scss/main.scss';

main.scss:

$color : red;
body {
  background-color: $color;
}

bundle.css (The compiled css) :

$color : red;
body {
  background-color: $color;
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  devtool: 'eval',
  resolve: {
    root: path.resolve(__dirname),
    alias: {
      js: 'src/javascript',
      scss: 'src/stylesheet',
  },
  extensions: ['', '.js', '.jsx']
  },
  entry: [
    './src/javascript/main.js'
  ],
  output: {
    path: path.join(__dirname, 'dist', 'static'),
    filename: 'bundle.js',
    chunkFilename: "[chunkhash].js",
    publicPath: '/static/'
  },
  plugins: [
    new ExtractTextPlugin("bundle.css")
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel'],
      include: [ path.join(__dirname, 'src', 'javascript') ]
    },
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style-loader', 'raw-loader', 'sass-loader'),
      include: [ path.join(__dirname, 'src', 'stylesheet') ]
    }]
  }
};

Command message:

Version: webpack 1.12.14
Time: 8406ms
     Asset       Size  Chunks             Chunk Names
 bundle.js  970 bytes       0  [emitted]  main
bundle.css   22 bytes       0  [emitted]  main
chunk    {0} bundle.js, bundle.css (main) 110 bytes [rendered]
    [0] multi main 28 bytes {0} [built]
    [1] ./src/javascript/main.js 41 bytes {0} [built]
    [2] ./src/stylesheet/main.scss 41 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 43 bytes [rendered]
        [0] ./~/raw-loader!./src/stylesheet/main.scss 43 bytes {0} [built]

Juho Vepsäläinen Juho Vepsäläinen · Accepted Answer · 2016-04-05T03:25:42

Check your ExtractTextPlugin.extract statement. I think you need

ExtractTextPlugin.extract('style', 'raw!sass')

In the current declaration it processes through raw-loader and skips sass-loader. Hence the output.

Webpack - After compiling sass, the resulting css is the same as the scss file

1 Answers