Non-CSS compiled SCSS files react with Webpack

Question

Below is my folder structure and files for a React project that works fine, but I cannot add CSS via SCSS via Webpack using extract-text-webpack-plugin . Let me know what I'm doing wrong with the configuration.

Folder structure

Webpack.config.js file -

 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: './app/index.html', filename: 'index.html', inject: 'body' }); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ExtractTextPluginConfig = new ExtractTextPlugin('main.css',{ allChunks: true }); module.exports = { entry: './app/app.jsx', output: { path: path.resolve('dist'), filename: 'bundle.js' }, devtool: 'source-map', module: { loaders: [ {test: /.js$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")} ] }, plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig] }; 

Package.json -

 { "name": "reactyarn", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "start": "webpack-dev-server --hot" }, "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.4", "extract-text-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^2.29.0", "sass-loader": "^6.0.6", "style-loader": "^0.18.2", "webpack": "^3.3.0", "webpack-dev-server": "^2.5.1" }, "dependencies": { "path": "^0.12.7", "react": "^15.6.1", "react-dom": "^15.6.1" } } 

FYI -

I do not get the JS error in the console, so I believe that only its configuration does not work.

Answer 1

It seems that one of the loaders ( sass-loader ) is sass-loader and is not configured correctly in your modules.

Try the example below:

 module.exports = { entry: './app/app.jsx', output: { path: path.resolve('dist'), filename: 'bundle.js' }, devtool: 'source-map', module: { loaders: [ {test: /.js$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] // <-- this is new ] }, sassLoader: { includePaths: [path.resolve(__dirname, 'relative/path/to/scss')] }, // <--- this is new plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig] }; 

Using ExtractPlugin.extract , you are referencing the tools for this in Webpack 2 (using rules and use ), but your Webpack configuration file seems to be oriented to Webpack 1.