sass-loader: Error compiling .scss file

Would be great if you guys could post a solution once you found it 👍

why. no one. shows. a solution with code. -_-

nm, I just fixed it, was missing the module object inside the webpack.config.js. Thanks!

I added a css-loader to the pipeline and the issue is now resolved.

Had the same issue, it turned out that it was Node who was throwing error but not Webpack since I’m running my code on both server and client. And Node, of course, doesn’t know what to do with .scss files

So I fixed it by putting this code into my server-only file

require.extensions['.scss'] = function () {}

I have met the same problem, and it is caused by passing wrong params to ExtractTextPlugin:

module: {
        loaders: [{
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader", "sass-loader")
        }]
}

and I have solved it by doing this:

module: {
        loaders: [{
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style-loader", "css!sass")
        }]
}

Explicitly excluding node_modules was the solution for me.

{
      test: /\.scss$/,
      exclude: /node_modules/,
      loaders: ['style-loader', 'css-loader', 'sass-loader'],
}

If you have to include node_modules for specific css files like Bootstrap or Toastr, then either @import the css files into your styles.scss or create a separate loader with them specifically for /\.css$/ files that includes node_modules.

HI! I am having a bit of a problem getting sass-loader working properly. Current structure of project (as it relates to sass configuration):

  - projectdir/
    - src/ 
       - app.js (root component, which imports styles in stylesheets/main.scss) 
   - stylesheets/
      - base/ 
      - components/
      - vendors/
      - main.scss

webpack.config.dev.js

  {
     // Load SCSS 
      test: /\.scss$/,  
     loaders: ['style', 'css', 'sass'],  
     // tell webpack where to look for sass/css files?  
     include:path.resolve(__dirname, 'stylesheets')  
  }

now in stylesheets/main.scss, I have the following:

  // each component makes use of what it needs 
  .landingPage-nav-component {
    @import 'base/all';
    @import 'vendors/all';
    @import 'components/header';
  }

When I run npm start I expect the styles in stylesheets/main.scss to be available in app but rather I get the error:

  Error in ./stylesheets/main.scss
Module parse failed: /Users/comp1/Code/Javascript/React/nonAdmin_frontend/stylesheets/main.scss 
Unexpected token (14:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (14:0)
 @ ./src/app.js 17:0-35 

Chrome dev has this error message:

./stylesheets/main.scss
Module parse failed: /Users/comp1/Code/Javascript/React/nonAdmin_frontend/stylesheets/main.scss 
Unexpected character '@' (13:0)
You may need an appropriate loader to handle this file type. 

Any tips on what I might be doing wrong?

Experiencing the same problem, not exactly sure what the problem is but it looks like the scss file is being treated like a javascript module even though there are loaders in place.

SyntaxError: /Users/sampeka/dev/sharestyle/app/styles/components/Logo.scss: Unexpected token (1:0)
> 1 | .logo img {
    | ^
  2 |    width: 100%;
  3 | }
  4 | 
    at Parser.pp.raise (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:1378:13)
    at Parser.pp.unexpected (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:2817:8)
    at Parser.pp.parseExprAtom (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:749:12)
    at Parser.parseExprAtom (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:4305:22)
    at Parser.pp.parseExprSubscripts (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:504:19)
    at Parser.pp.parseMaybeUnary (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseExpression (/Users/sampeka/dev/sharestyle/node_modules/babylon/index.js:324:19)

This is what works for my .less

module: {
    loaders: [
        {
            test: /\.(less|css)$/,
            include: /resources/,
            loaders: [
                'style?singleton',
                ExtractTextPlugin.extract(`css?${JSON.stringify({
                    // sourceMap: DEBUG,
                    // CSS Modules https://github.com/css-modules/css-modules
                    // modules: true,
                    // camelCase: true,
                    // localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
                    // CSS Nano http://cssnano.co/options/
                    minimize: !DEBUG,
                    calc: false,
                })}`),
                'postcss',
                'less',
            ]
        },
    ]
},
plugins: [
    new ExtractTextPlugin('style.min.css'),
]

Note

I use webpack@2.1.0-beta.21 and extract-text-webpack-plugin@2.0.0-beta.4

I had the same issue, and somehow… I insist on “somehow”, I fixed it by changing my loader from loader: 'style!css!sass' to loaders: ["style", "css", "sass"].

And here comes the mesmerizing part: I changed it back to loader: 'style!css!sass' and it still worked… somehow…

I have the same problem here. @seanwash Did you manage to make it work?

This works on the client though. But every time I refresh, there’s a glitch before css is loaded because webpack is building the file, which is not exactly what I want.

const config = {
    devtool: "source-map",
    entry: [
        `webpack-dev-server/client?http://${host}:${port}`,
        "webpack/hot/only-dev-server",
        "./src/client.js"
    ],
    output: {
        filename: "bundle.js",
        chunkFilename: "[name].bundle.js",
        path: dist,
        publicPath: `http://${host}:${port}/dist/`
    },
    module: {
    loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: ["react-hot", "babel?cacheDirectory"]
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                loader: "file"
            }
        ]
    },
    sassLoader: {
        includePaths: [path.resolve(__dirname, "../style")]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("development"),
                BROWSER: JSON.stringify(true)
            }
        }),
        new WebpackErrorNotificationPlugin()
    ]
};

And I try to import it like that.

import '../../style/utils/normalize.scss';

And I get that error.

SyntaxError: /Users/rparent/Documents/CTSProjects/arsenal/cms/application/app/style/utils/normalize.scss: Unexpected token (9:5)
   7 |  */
   8 | 
>  9 | html {
     |      ^
  10 |   font-family: sans-serif; /* 1 */
  11 |   -ms-text-size-adjust: 100%; /* 2 */
  12 |   -webkit-text-size-adjust: 100%; /* 2 */

hey @Chandu I have the same issue right now and I do have installed the css-loader installed and it’s in the pipeline.

webpack.config.js

    loaders: [
        {
            test: /\.scss$/,
            loader: 'style!css!sass'
        }
    ]

index.scss

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica', 'Arial', sans-serif;
    color: #666;
}

What did you do different?

I just want to let you all know that I had this exact same problem. In my case it turns out that I had a typo. I had modules instead of module

double check ALL your keywords!

@LoicUV and @Bosper: commenting out:

 {
     include:path.resolve(__dirname, 'stylesheets')  
  }

got everything working. Not sure why but thought it might be helpful for you both to know.

I’m not sure if everyone above was in the same situation, but I ran across this issue trying to do Isomorphic/Server Side rendering for React.

@ilearnio’s solution didn’t work for me - however the problem is definitely Node. Basically the wrinkle is that Webpack does its magic by looking for require/imports. So you must require/import the .scss file - however if you are doing Isomorphic/Server Side rendering, Node does not know what these .scss or even .css files are and has no webpack to help it, and you end up with a lot of “Unexpected Token” errors.

I followed the solution described here: and it worked well. Basically you declare the process.env.BROWSER variable in webpack, and conditionally require your .scss files on the client side if this variable exists. You also delete it at the beginning of your server.js file so it does not exist - so the server side code will not try to import it.

If someone like me still needing this information this is my webpack.config file @Chandu gave the idea how to solve it. Thanks. I’m using webpack 2.2 and extract-text-plugin@beta (^2.0.0-rc.3)

@raphaelparent wow I don’t know how I missed your reply! Sorry about that.

I also solved this problem with the extract text plugin, then I require the css file at the top of of main is file. I can post the code if anyone needs.

@fxlemire your solution somehow worked for me too. Thanks!

Any body visiting this page in 2018, this piece of code made it work for me.

     {
        test: /\.scss$/,
        use: sassExtractPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
            },
            'sass-loader'
          ]
        }),
     }

I fixed this issue in webpack@2.1.0-beta.25 by passing a value for includePaths…

ExtractTextPlugin.extract({
   fallbackLoader: 'style-loader',
   loader: 'css-loader!sass-loader?includePaths[]=' + path.resolve(__dirname, './src')
})

as @MsUzoAgu stated, include and/or exclude statements break this loader. i do not understand why this issue is closed. what am i missing here?

being able to include and exclude certain files is vital in my setup, so the workaround of removing the statement(s) is not really doing it for me. just to clarify, i would like to understand if this is a bug, or desired behaviour of this loader.

@seanwash Yes, please do show the code!! 😃

I fixed the error on the first post by adding !css to require('css!./stylesheets/main.scss'); Took me about 4h to figure this out… phew.

It compiles just fine to JS, but I still don’t have the CSS file. So I’m trying to setup the ExtractTextPlugin, and I’ve come across this:

ERROR in ./~/css-loader!./src/stylesheets/main.scss Module build failed: CssSyntaxError: /css-loader!/Users/...

Any ideas guys?

@danazkari Strange, I’m having the same issue as well and I do have the module object like so:

var BrowserSyncPlugin = require('browser-sync-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './source/index.coffee',

  output: {
    filename: './app/bundle.js'
  },

  module: {
    loaders: [
      {test: /\.coffee$/, loader: 'coffee'},
      {test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass'), include: './source/scss'}
    ]
  },

  plugins: [
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 9000,
      server: {baseDir: ['./app']}
    }),

    new ExtractTextPlugin('./app/bundle.css', {
      allChunks: true
    })
  ]
}

body {
  background: red;
  color: #fff;
}