Sass-loader error 'options has an unknown property 'indentedSyntax'' when upgrading Vuetify from 1.5 to 2

Question

I am upgrading Vuetify in my Vue CLI 3 project from version 1.5 to 2. I have followed these instructions, doing a full install. Since the upgrade, running \'npm run serve\'

Answer 1

Update for those using version 10+. prependData is no longer valid. However you can use additionalData as a drop-in replacement.

Answer 2

Using the webpack 5.1.3 and sass-loader version 10.0.3, I had to use a different syntax (additionalData instead of prependData), as bellow:

webpack.config.js

        {
          test: /\.(css|scss|sass|less)$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader',
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
                additionalData: '@import "assets/scss/_variables.scss";'
                },
              },
            },
          ],
        },

Bear in mind the syntax requires the double quotes in the path and the semicolon before the end of the single quote just as if you were writing a normal scss file.

Example:

'@import "path/_file.scss";' 

In case you need to import multiple files you can use the template string symbol (``) as bellow:

        {
          test: /\.(css|scss|sass|less)$/,
          use: [
            ...
            {
              ...
              options: {
                sourceMap: true,
                additionalData: `@import "assets/scss/_variables.scss";
                                 @import "assets/scss/_mixins.scss";
                                 @import "assets/scss/_misc.scss";`
                },
              },
            },
          ],
        },

You can also take the advantage of template string as bellow:

`@import "${path.resolve(APP_DIR, '/assets/scss/')}/_variables.scss";`

Be advised: I tried this approach to reduce bundle size and the result was terrible as when you start to see what the webpack is actually doing you return to the basic import all needed styles in your main component as sass-loader will actually prepend in multiple components the styles you inform in the additional data. In my case the bundle got 3 times it's original size.

Cheers

Answer 3

Actually you are using sass-loader 8+ and it has an option a little bit different.
Try using prependData instead of data.
Check this github issue

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          prependData: `@import "~@/sass/main.scss"`
        }
      }
    }
}

Answer 4

I had the same issue and fixed it by downgrading sass-loader by setting

"sass-loader": "7.3.1",

in package.json.

This was suggested on the Vuetify Discord

Answer 5

If you use NUXT you should configure like this：

//nuxt.config.js
loaders: {
  less: {
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        'primary-color': '#5c6ac4',
        'layout-body-background': '#fff'
      }
    }
  }
}