webpack-contrib / sass-loader

Compiles Sass to CSS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SassError: expected "{"

LaoChen1994 opened this issue · comments

my dependencies is as follow:

"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^5.8.0"
"sass-loader": "12",
"style-loader": "^3.3.1",
"css-loader": "^6.7.1",
"sass": "^1.54.5"

and the css config in webpack is as follow

    {
      "test": /\.s(a|c)ss/,
      "exclude": /\.module\.s(a|c)ss/,
      "use": [
       MiniCssExtractPlugin.loader,
        {
          "loader": "css-loader",
          "options": {
            "modules": true,
            "importLoaders": 2,
            "esModule": true
          }
        },
        {
          "loader": "postcss-loader",
          "options": {
            "postcssOptions": {
              "plugins": [
                "postcss-preset-env"
              ]
            }
          }
        },
        "sass-loader"
      ]
    }

the test scss file is very easy and cannot find where is not right as follow:

.base {
    color: #f44;
    font-size: 16px;
    line-height: 24px;
}

Bug report

ERROR in ./src/base/index.module.scss (./src/base/index.module.scss.webpack[javascript/auto]!=!../../node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.1_webpack@5.74.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../node_modules/.pnpm/registry.npmmirror.com+postcss-loader@7.0.1_postcss@8.4.16+webpack@5.74.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/.pnpm/registry.npmmirror.com+sass-loader@12.6.0_fc5e53646b56238c4254cd6932da68ea/node_modules/sass-loader/dist/cjs.js!../../node_modules/.pnpm/registry.npmmirror.com+mini-css-extract-plugin@2.6.1_webpack@5.74.0/node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.1_webpack@5.74.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../../node_modules/.pnpm/registry.npmmirror.com+postcss-loader@7.0.1_postcss@8.4.16+webpack@5.74.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../../node_modules/.pnpm/registry.npmmirror.com+sass-loader@12.6.0_fc5e53646b56238c4254cd6932da68ea/node_modules/sass-loader/dist/cjs.js!../../node_modules/.pnpm/registry.npmmirror.com+mini-css-extract-plugin@2.6.1_webpack@5.74.0/node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.1_webpack@5.74.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[17].use[1]!../../node_modules/.pnpm/registry.npmmirror.com+postcss-loader@7.0.1_postcss@8.4.16+webpack@5.74.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[17].use[2]!../../node_modules/.pnpm/registry.npmmirror.com+sass-loader@12.6.0_fc5e53646b56238c4254cd6932da68ea/node_modules/sass-loader/dist/cjs.js!./src/base/index.module.scss)
Module build failed (from ../../node_modules/.pnpm/registry.npmmirror.com+mini-css-extract-plugin@2.6.1_webpack@5.74.0/node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ../../node_modules/.pnpm/registry.npmmirror.com+sass-loader@12.6.0_fc5e53646b56238c4254cd6932da68ea/node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".

  ╷
2 │ export default {"base":"QV0mYZHbp872Rg3sdEVx"};
  │                                              ^
  ╵

src\base\index.module.scss 2:46  root stylesheet

Actual Behavior

the build is interrupted by the Sass Error

Expected Behavior

the webpack should build successfully

How Do We Reproduce?

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
OS: Windows 10 10.0.17763
CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
Memory: 8.88 GB / 15.95 GB
Binaries:
Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Internet Explorer: 11.0.17763.2989
Packages:
babel-loader: ^8.0.5 => 8.2.5
css-loader: ^6.7.1 => 6.7.1
css-minimizer-webpack-plugin: ^4.0.0 => 4.0.0
file-loader: ^6.2.0 => 6.2.0
html-webpack-plugin: ^5.5.0 => 5.5.0
postcss-loader: ^7.0.1 => 7.0.1
sass-loader: 12 => 12.6.0
style-loader: ^3.3.1 => 3.3.1
terser-webpack-plugin: ^5.3.5 => 5.3.5
thread-loader: ^3.0.4 => 3.0.4
typed-css-modules-webpack-plugin: ^0.2.0 => 0.2.0
url-loader: ^4.1.1 => 4.1.1
webpack: ^5.74.0 => 5.74.0
webpack-cli: ^4.10.0 => 4.10.0
webpack-dev-server: ^3.1.14 => 3.11.3
webpack-merge: ^5.8.0 => 5.8.0