Skip to content

Update documentation for sass indented syntax #2086

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lorefnon opened this issue Oct 20, 2024 · 1 comment
Open

Update documentation for sass indented syntax #2086

lorefnon opened this issue Oct 20, 2024 · 1 comment

Comments

@lorefnon
Copy link

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.

@limoncelloo
Copy link

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
        }
    }
}
`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants