SassError: expected "{"

[Jan Swist]

This is the style from my Vue template file:

<style lang="sass" scoped>
  a
    color: inherit
    cursor: pointer
  
  .nav-link.active
    border-bottom: 4px solid #28a745
  
  .nav-justified
    border-bottom: 0.25px solid lightgray
  
  .fade-enter-active, .fade-leave-active
    transition: opacity .1s
  
  .fade-enter, .fade-leave-to
    opacity: 0
</style>

and this is the error I get:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
   ╷
16 │     opacity: 0
   │               ^
   ╵

Webpack config:

module.exports = {
  module: {
    rules: {
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "vue-style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          {
            loader: "sass-loader"
          }
        ],
      },

package.json"

{
  "private": true,
  "scripts": {
    "dev": "webpack serve --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js && firebase deploy",
    "functions-deploy": "firebase deploy --only functions",
    "functions-emulator": "firebase emulators:start --only functions"
  },
  "dependencies": {
    "@vue/compat": "^3.1.0",
    "@vue/compiler-sfc": "^3.1.0",
    "bootstrap-vue": "^2.22.0",
    "pug-plain-loader": "^1.0.0",
    "vue": "^3.1.0",
    "vue-multiselect": "^2.1.3"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0-rc.2",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^4.5.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "pug": "^3.0.2",
    "pug-loader": "^2.4.0",
    "rimraf": "^2.6.0",
    "sass": "^1.32.8",
    "sass-loader": "^10.2.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^16.8.3",
    "vue-style-loader": "^3.0.1",
    "webpack": "^4.46.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

[Alexander Akait]

Sounds like there is a bug in vue-style-loader, (sass thinks your file is SCSS not Sass), can you create minimum reproducible test repo

[Tomas Martinez]

Did you find the solution?

[absidue]

telling sass to use the indented syntax, works fine in our project:

{
  loader: 'sass-loader',
  options: {
    // eslint-disable-next-line
    implementation: require('sass'),
    sassOptions: {
      indentedSyntax: true
    }
  }
},

[Alexander Akait]

I want to close the issue due inactivity, you solution above can work if filename doesn't have sass extension, so sass-loader can't undestand what is syntax used, @absidue thank you for advice for other developers