Vue-loader: sass loading failed: Invalid CSS after "html {": expected "}", was "{"

[aguegu]

With a bran-new webpack project created by [email protected].

If the style section of App.vue is modified to

<style lang="sass">

And then I got node-sass and sass-loader installed.

eslint would complain

I can eliminate this error by making the style section inline

According to this sass issue, something may be appended to the style text. So I consider it as a vue-loader issue.

My environment:

[yyx990803]

lang="sass" uses the indented syntax, if you want the CSS-superset syntax, use lang="scss".

[aguegu]

Cool, it fixed.

This error just popped up when I upgrade my project templates that generated 2 months ago by [email protected] to the latest. I did not get this error before, so I figured that it could be some updates in vue-loader cause the problem.

There are lots of updates. Great job. :)

[baixiaosh]

您好，我在scss语法里面加rgba写法的颜色，会直接编译报错。不用这个写法就不会报错，正常编译。

[baixiaosh]

[i-ked-ii]

SASS SYNTAX is incorrect. https://sass-lang.com/guide