user3622460 user3622460 - 10 months ago 104
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: [
'./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'
}]
}
};

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