How can I use sass in my React / webpack project?

Question

I had this working before by importing it with

import sass from '../scss/application.scss';

Is this the wrong type of import above?

Now its giving me the following error...

ERROR in ./app/components/Landing.js Module not found: Error: Can't resolve 'style' in '/Users/sam/Desktop/talkingwith/talkingwith' BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'style-loader' instead of 'style'. @ ./app/components/Landing.js 13:19-54 @ ./app/App.js @ multi (webpack)-dev-server/client?http://localhost:3333 ./app/App.js

Not sure how I can use SASS in my components now.

edit: my webpack file

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

Like the error states you need to specify the life for your styles. What did differ webpack config file look like? — Pineda

Paul Kaspriskie Paul Kaspriskie · Accepted Answer · 2017-02-01T16:39:07

I am not 100% sure what sass library you are using. What works really well for me is using the node-sass library along with sass-loader. https://github.com/jtangelder/sass-loader Also it is good practice to use sass-loader with css-loader and style-loader. (as in my example below)

Using sass-loader your webpack.config.js would look something like this.

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
   './app/App.js'
  ],
  output: {
   path: __dirname + '/public',
   filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
    inline:true,
    contentBase: './public',
    port: 3333
  },
  module: {
    loaders: [
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader"
     },
     { 
      test: /\.scss$/, 
      loaders: ["style-loader", "css-loader", "sass-loader"] 
     }
   ]
  }
};

After you have your webpack.config.js updated to above all you need to do is require your .scss file in your entry point js file, in your case App.js

require('path/to/your/style.scss');

How can I use sass in my React / webpack project?

3 Answers