user3622460 user3622460 - 3 years ago 297
React JSX Question

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

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: [
output: {
path: __dirname + '/public',
filename: "bundle.js"
plugins: [HTMLWebpackPluginConfig],
devServer: {
contentBase: './public',
port: 3333
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
test: /\.scss$/,
loader: 'style!css!sass'

Answer Source

Thought I would post the solution I ended up using

     test: /\.scss$/,
     loader: 'style-loader!css-loader!sass-loader'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download