Webpack +SCSS error: "Module parse failed: Unexpected character '@' (1:0)"

Question

I am trying to customize bootstraps default colors with SCSS. When i try to run the project I get following error:

    ERROR in ./ClientApp/style.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @import "custom";
| @import "~bootstrap/scss/bootstrap";
|

package.json SNIPPET

{
  "devDependencies": {
    "css-loader": "^2.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.8.2",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
  }
}

webpack.config.js SNIPPET

    module: {
      rules: [
        { test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
        { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
        { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'] },
        { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
---------- I ADDED THIS SNIPPET FROM AN EXAMPLE I FOUND --------------
            {
              test: /\.scss$/,
              include:
              use: [
                {
                  loader: "style-loader" // creates style nodes from JS strings
                },
                {
                  loader: "css-loader" // translates CSS into CommonJS
                },
                {
                  loader: "sass-loader" // compiles Sass to CSS
                }
              ]
            }
-------------- SNIPPET END -------------------------------
          ]
        },

The project is a sample project: https://github.com/TrilonIO/aspnetcore-Vue-starter

Can anyone see what I'm missing? It has been some frustrating hours...

what version o webpack are you using? if you are < 4 you need a different loader — Ricardo Gonzalez
– Ricardo Gonzalez, Commented Mar 13, 2019 at 20:08

oshell · Accepted Answer · 2019-03-13 16:30:28Z

2

your package.json looks fine. you need sass-loader node-sass. It might depend on you version of vue, but the official documentation states to use the following webpack rule.

{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'sass-loader'
  ]
}

My guess is that the style loader enables to import scss, but not using the template syntax.

<style lang="scss" src="./styles.scss">

Moreover I would expect sass to be one of the devDependencies too.

npm i sass --save-dev

edited Mar 13, 2019 at 16:30

answered Mar 13, 2019 at 16:24

oshell

9,1511 gold badge31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack +SCSS error: "Module parse failed: Unexpected character '@' (1:0)"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related