0

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.

2
  • That debug log isn't very useful, as it doesn't contain the actual error you're getting. Can you start WDS manually and add the error to your question? webpack-dev-server --progress --colors --inline Commented Sep 19, 2016 at 9:24
  • @robertklep Sorry about that, I edited my question. Commented Sep 19, 2016 at 9:35

1 Answer 1

1

Your Webpack configuration is missing the following line:

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

See the documentation.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.