Question

我试图在基于Nuxt的项目中使用Sass，但没有运气，我遵循documentation的安装说明，告诉它安装一些软件包，它将符合要求。但出现以下错误

error  in ./pages/index.vue?vue&type=style&index=0&lang=sass&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

body{
    ^
      Invalid CSS after "body{": expected "}", was "{"

我的代码在index.vue中

<style lang="sass">
body{
  margin: 0;

  links{
    border-bottom: 2px solid red;
  }
}
</style>

Answer 1

以下是有关Sass和Scss的信息

Sass有两种语法。第一个称为SCSS   （Sassy CSS），并在整个本参考文献中使用，是对   CSS的语法。这意味着每个有效的CSS样式表都是有效的   具有相同含义的SCSS文件。 Sass增强了此语法   下述功能。使用此语法的文件带有.scss   扩展名。

第二种或更旧的语法，称为缩进语法（或   有时只是“ Sass”），提供了一种更简洁的CSS编写方式。它   使用缩进而不是方括号来表示嵌套   选择器和换行符，而不是分号来分隔属性。   使用此语法的文件扩展名为.sass。   http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax

您写的是无效的Sass。如果您更改了lang="scss"，它将可以使用，并且您仍然可以享受Scss带来的好处。

TL; DR：lang="scss"

为什么Sass无法在Nuxt项目中进行编译

1 个答案: