Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

importing .scss files

See original GitHub issue

Hi there,

i have installed sass-loader and node-sass to my project and added this line into my webpack.config.babel.js and webpack.config.dev.js

      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader!sass-loader'
      },

but I am always getting this error when importing .scss file:

/Users/mmintel/Projekte/writr/node_modules/react-toolbox/lib/app_bar/theme.scss:1
(function (exports, require, module, __filename, __dirname) { @import "../colors";
                                                              ^

SyntaxError: Unexpected token ILLEGAL

What’s wrong with it?

Issue Analytics

State:
Created 7 years ago
Comments:11

Top GitHub Comments

2reactions

brandonburkettcommented, Oct 1, 2016

@mmintel or @p-le did either of you resolve your sass issues? Hitting the same error.

2reactions

fabianisherecommented, Jul 29, 2016

I ran into the same problem today. I found out the following configuration worked:

webpack.config.babel.js:

{
    test: /\.scss$/,
    loaders: 'css-loader/locals?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1!sass-loader',
},

webpack.config.dev.js:

{
    test: /\.scss$/,
    loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!sass-loader?sourceMap',
},

webpack.config.prod.js:

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!sass-loader',
     }),
},

Does that work for you? The magic here is css-loader/locals in webpack.config.babel.js which only exports identifier mappings.