CODEWITHSUNDEEP
webpackcss-loadersass-loaderextract-text-pluginwebpack-3
Shivam Kumar
Shivam Kumar

Reputation: 121

Parse Error in css-loader sass-loader

I am migrating from webpack 1 to 3. After going through so many errors and now I am stuck on this. Can someone please HELP!

I am getting these errors -

ERROR in ./src/main/main.scss
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| body{
|     color: red;
| }
 @ ./src/main/js/App.jsx 13:0-23
 @ ./src/main/js/index.jsx

Here's the sample repo - https://github.com/shivamkumar110/webpack-3-test

and here is snippet from my webpack.config.js

module: {
        rules: [
        {
            test: /\.jsx?$/,
            use: ['eslint-loader'],
            include: SRC,
            enforce: 'pre'
        },  {
            test: /\.jsx?$/,
            use: ['babel-loader'],
            include: SRC
        }, {
            test: /(\.css|\.scss)$/,
            include: SRC,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                        {
                        loader:'css-loader',
                        options: {
                            sourceMap:true
                            }
                        },
                        {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                            }
                        }
                    ]
                })
        },

Upvotes: 0

Views: 3664

Answers (2)

npadige
npadige

Reputation: 1

Had the error below: When executed "ng serve projectname" Angular version 6

Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.

Solution: Delete package-lock.json file and then run "npm install" this should update all dependencies.

Then, run the command below: "npm install sass-loader node-sass css-loader style-loader --save-dev"

Upvotes: 0

Rakesh Kumar Cherukuri
Rakesh Kumar Cherukuri

Reputation: 1271

Most likely you are missing the sass-loader. What you can do is

  1. Make sure the required loaders are installed as outlined in the webpack docs.

    i.e run npm install sass-loader node-sass css-loader style-loader --save-dev

    That should fix the issue.

  2. If not fixed after doing above, move local node_modules folder to a temporory location and then run npm install. This will get all the modules freshly.

    try running webpack again and it should definitely work.

Do let us know how it goes.

Hope that helps.

Rakesh

Upvotes: 0

Related Questions