vuejs/vue-loader

Update documentation for sass indented syntax

lorefnon opened this issue · 1 comments

Current docs recommend use of following config to enable sass indented syntax:

                    {
                        loader: "sass-loader",
                        options: {
                            sassOptions: {
                                indentedSyntax: true
                            }
                        }
                    },

It looks like after a breaking change in sass-loader, we must use this option now:

                    {
                        loader: "sass-loader",
                        options: {
                            sassOptions: {
                                syntax: "indented"
                            }
                        }
                    },

Once we have a confirmation from sass-loader devs (webpack-contrib/sass-loader#1240) that this undocumented change was intentional, we can update the docs.

I spent really long hours searching for the issue in my Webpack configuration. Through trial and error, systematically ruling out problems in different packages, I discovered that since sass-loader@16.0.0, the "indentedSyntax: true" setting no longer works.

As a result, parameter lang="sass" in style embedded in .vue files is ignored, and the styles are parsed as scss, which leads to cryptic errors:

<style lang="sass">
    //...
</style>

Additionally, when using the latest version of the sass@1.85.1 package (also occurs in previous versions) , I was unable to get rid of the warnings:

Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

despite setting the option api: 'modern-compiler'. The only solution was to suppress these warnings using silenceDeprecations: ['legacy-js-api'].

For now, setting syntax: "indented" solves all these problems.

tl;dr;

// ❌
{
    loader: 'sass-loader',
    options: {
        sassOptions: {
            indentedSyntax: true, // doesn't work
            api: 'modern-compiler', // it doesn't work either
            implementation: sass
        }
    }
},

// GOOD ✅
{
    loader: 'sass-loader',
    options: {
        sassOptions: {
            syntax: 'indented', // works
            api: 'modern-compiler', // it also works
            implementation: sass
        }
    }
}
`