J.Koppen J.Koppen - 1 year ago 281
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

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


module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: 'bundle.js'
module: {
loaders: [
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
{ 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

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 Source

Your Webpack configuration is missing the following line:

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

See the documentation.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download