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

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