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