Why isn't sass-loader able to compile dart sass files?

user_551357 0
Viewed 311

take this from my webpack.config file:

  {
    test: /\.scss$/,
    use: [
      {
        loader: "sass-loader",
        options:{
          implementation: require('sass')
        }
      }
    ],
  },

I'm also explicitly declaring the implementation (usually not needed). What I get is this:

ERROR in ../scss/front-page.scss 1:0
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> :root {
|   --border-radius: 7px;
| }

It seems it doesn't recognize css custom props.

Using

"sass": "^1.49.7",
"sass-loader": "^12.6.0",

Any idea?

sass-loader webpack sass config javascript
1 Answers

For your issue, though you can try something like this the loaders go from left to right so you need to make sure you handle your sass first then your CSS then you inject the inline-styles with style-loader-

       {
            test: /\.(sa|sc|c)ss$/,
            exclude: /node_modules/,
            use: [
                "style-loader",
                "css-loader",
                options: {
                    url: true,
                },

                "sass-loader",
                {
                    loader: "sass-resources-loader",
                    options: {
                        resources: ["/_variables.scss"],
                    },
                },
            ],
        },
user_90454080
Related