J.Koppen J.Koppen - 2 months ago 36
Node.js Question

Error webpack using sass loader

Currently I'm stuck on getting Sass to work in my React project. In the guide I followed everything is working fine but as soon as I get to the point where I need to use the

ExtractTextPlugin
in my
webpack.config.js
it throws me an error. My main sass file is located in
root/style.main.scss
and is included in my
index.js
where it renders my app in the DOM like this:
import style from '../style/main.scss';


webpack.config.js:

module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
'es2015',
'react'
]
}
},
{ test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
{ test: /\.useable\.css$/, loader: "style/useable!css" },
// sass
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true
})
],
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
proxy: {
'/api/*': {
target: 'http://mab-cmdb.dev',
secure: false,
changeOrigin: true
}
}
},
};


EDIT: webpack error

/Users/jordykoppen/git/mab-cmdb-v2-frontend/webpack.config.js:25
loader: ExtractTextPlugin.extract('css!sass')
^

ReferenceError: ExtractTextPlugin is not defined
at Object.<anonymous> (/Users/jordykoppen/git/mab-cmdb-v2-frontend/webpack.config.js:25:17)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at module.exports (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/bin/convert-argv.js:80:13)
at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:62:48)
at Module._compile (module.js:409:26)


Thanks for the help.

Answer

Your Webpack configuration is missing the following line:

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

See the documentation.