from .sass to .css file with webpack

Question

So I have SASS files and I want to use webpack to transpile it down to css, but I don't want an ugly looking <style></style> tag to be added on my document when it is loaded and I don't want to do require('style!sass!./file.sass') to my every react components but rather I want all my sass files to be transpiled into one file called app.css but I can't make it work. Please help me do this.

• webpack version 2.2.1

My webpack.config.js

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

module.exports = {
    entry: [
        __dirname + '/resources/assets/js/app.js',
        __dirname + '/resources/assets/sass/app.sass'
    ],

    output: {
        path: __dirname + '/public/js',
        filename: 'app.js'
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },

            {
                test: /\.sass$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract([
                    'style-loader',
                    'sass-loader'
                ])
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin({
            filename: __dirname + '/public/css/app.css',
            allChunks: true
        })
    ]
}

using that webpack.config.js file gives me the following error when I run webpack.

C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Chunk.js:59
                throw new Error("Chunk.entry was removed. Use hasRuntime()");
                ^

Error: Chunk.entry was removed. Use hasRuntime()
    at Chunk.get entry [as entry] (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Chunk.js:59:9)
    at C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\extract-text-webpack-plugin\index.js:201:13
    at Array.filter (native)
    at Compilation.<anonymous> (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\extract-text-webpack-plugin\index.js:200:37)
    at Compilation.applyPlugins0 (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\tapable\lib\Tapable.js:68:14)
    at Compilation.seal (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compilation.js:558:8)
    at C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compiler.js:474:16
    at C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\tapable\lib\Tapable.js:225:11
    at _addModuleChain (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compilation.js:472:11)
    at processModuleDependencies.err (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compilation.js:443:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! 3-projectname@1.0.0 build: `node ./node_modules/webpack/bin/webpack.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 3-projectname@1.0.0 build script 'node ./node_modules/webpack/bin/webpack.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the 3-projectname package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./node_modules/webpack/bin/webpack.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 3-projectname
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 3-projectname
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\me\Documents\projects\web\experiments\3-projectname\npm-debug.log

My sass file

@import './partials/globals'

Answer 1

I agree with @epiqueras, if you are using webpack2 then you need to also use version 2.x of extract-text-webpack-plugin or your build will fail.

So in your case, it's going to be like this.

module.exports = {
entry: [
    __dirname + '/resources/assets/js/app.js',
    __dirname + '/resources/assets/sass/app.sass'
],

output: {
    path: __dirname + '/public/js',
    filename: 'app.js'
},

module: {
    rules: [ // from 'loaders' to 'rules'
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        },

        {
            test: /\.sass$/,
            exclude: /node_modules/,
            loader: ExtractTextPlugin.extract({
              fallbackLoader: 'style-loader',
              loader: ['style-loader','sass-loader']
            })
        }
    ]
},

plugins: [
    new ExtractTextPlugin('bundle.css') // what the output file (css) is going to be
]

}

Answer 2

As of webpack 2 this is how you configure the plugin:

// In the loaders (now 'rules') array
{
  test: /\.sass$/,
  exclude: /node_modules/,
  use: ExtractTextPlugin.extract({
    fallbackLoader: "style-loader", // Will inject the style tag if plugin fails
    loader: "css-loader!sass-loader",
  }),
}

plugins: [
  new ExtractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true })
]

You had also forgotten to use the css loader after the sass loader.

Make sure you have v2 of the Extract Text plugin installed. v1 does not work with webpack 2.

Your webpack config looks like it was made for webpack 1. https://webpack.js.org/guides/migrating/