Sass Compilation Issue

[ziggy981]

I'm getting the following error when trying to compile my project after upgrading some npm packages (getting latest and mainly upgrading carbon). I'v been stuck on this and can't seem to find what's wrong but seems sass failing:

The error im getting:

ERROR in ./app/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/fast-sass-loader/lib/index.js??ruleSet[1].rules[2].use[3]!./app/styles/index.scss)
Module build failed (from ./node_modules/fast-sass-loader/lib/index.js):
Error: expected "{".
...
...
  app\styles\index.scss 3:392  root stylesheet
    at Object.wrapException (E:\MyProject.FrontEnd\node_modules\sass\sass.dart.js:1247:17)
    at SpanScanner.error$3$length$position (E:\MyProject.FrontEnd\node_modules\sass\sass.dart.js:67792:15)
    at SpanScanner.expectChar$2$name (E:\MyProject.FrontEnd\node_modules\sass\sass.dart.js:67856:12)
    at SpanScanner.expectChar$1 (E:\MyProject.FrontEnd\node_modules\sass\sass.dart.js:67859:19)

Here are my packages in package.json

"dependencies": {
    "@babel/core": "7.9.6",
    "@babel/helper-compilation-targets": "7.14.5",
    "@babel/plugin-proposal-async-generator-functions": "7.14.7",
    "@babel/plugin-proposal-class-properties": "7.14.5",
    "@babel/plugin-proposal-dynamic-import": "7.14.5",
    "@babel/plugin-proposal-json-strings": "7.14.5",
    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@babel/polyfill": "7.8.7",
    "@babel/preset-env": "7.9.6",
    "@babel/preset-react": "7.9.4",
    "@carbon/charts": "^1.5.2",
    "@carbon/charts-react": "^1.5.2",
    "@carbon/colors": "^11.4.0",
    "@carbon/pictograms-react": "^11.31.0",
    "@carbon/react": "^1.12.0",
    "@carbon/themes": "^11.8.0",
    "@carbon/type": "^11.8.0",
    "async-lock": "1.3.2",
    "autoprefixer": "9.7.6",
    "axios": "0.20.0",
    "babel-loader": "8.1.0",
    "circular-dependency-plugin": "5.2.2",
    "classnames": "2.2.6",
    "clean-webpack-plugin": "3.0.0",
    "core-js": "3.6.5",
    "css-loader": "^6.7.1",
    "d3": "^7.6.1",
    "downloadjs": "1.4.7",
    "eslint": "6.8.0",
    "eslint-config-google": "0.14.0",
    "eslint-loader": "4.0.2",
    "fast-async": "7.0.6",
    "fast-sass-loader": "^2.0.1",
    "file-loader": "6.0.0",
    "history": "4.10.1",
    "html-webpack-plugin": "5.3.2",
    "is_js": "0.9.0",
    "jest": "26.1.0",
    "jest-editor-support": "27.2.0",
    "jest-trx-results-processor": "2.0.3",
    "jwt-decode": "2.2.0",
    "mini-css-extract-plugin": "1.6.0",
    "moment": "2.26.0",
    "postcss-custom-properties": "^12.1.8",
    "postcss-loader": "^7.0.1",
    "process": "0.11.10",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-countdown": "2.3.2",
    "react-dom": "16.13.1",
    "react-idle-timer": "4.6.4",
    "react-input-mask": "2.0.4",
    "react-intl": "5.10.0",
    "react-jsx-parser": "1.25.1",
    "react-redux": "7.2.0",
    "react-router-dom": "5.1.2",
    "react-sanitized-html": "2.0.0",
    "redux": "4.0.5",
    "redux-state-sync": "3.1.2",
    "sanitize-html": "1.27.4",
    "sass": "^1.54.9",
    "sass-loader": "^13.0.2",
    "style-loader": "1.2.1",
    "uuid": "8.3.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }

[nex3]

It's hard to tell what's going on here without being able to see your stylesheet. What specific chunk of CSS is Sass complaining about? Can you reproduce this error with the Sass compiler on its own?

[aarkerio]

@ziggy981 hi! could you find a solution? I'm kind of stuck here 🙃

Edit:

It looks like "style-loader" is producing some unexpected code. I could fix the problem migrating to mini-css-extract-plugin:

https://www.npmjs.com/package/mini-css-extract-plugin

Second edit:

Forget about the "style-loader" line: webpacker (shakapacker) doesn't need the webpack "rules:" in the configuration file.