如何在我的 Vue 组件中使用 SASS 预处理器？答案

【问题标题】：How can I use SASS pre-processor in my Vue components?如何在我的 Vue 组件中使用 SASS 预处理器？
【发布时间】：2020-09-03 03:11:17
【问题描述】：

我想在我的 Vue 2 CLI 项目的组件中使用 language="sass"，但是在使用 SASS 语法时它会引发我和错误：

Syntax Error: Missed semicolon

我已安装 sass-loader 和 node-sass 作为开发依赖项。
我将此添加到我的 webpack 配置规则中，但这也没有解决它：

{
    test: /\.sass$/,
    use: [
      'vue-style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          indentedSyntax: true,
          // sass-loader version >= 8
          sassOptions: {
            indentedSyntax: true
          },
          prependData: `@import "@/styles/_variables.sass"`
        }
      }
    ]
  }

我的组件中的 SASS 代码：

<style language="sass">

  #app
    font-family: 'Avenir', Helvetica, Arial, sans-serif
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    text-align: center
    color: #2c3e50
    margin-top: 60px

</style>

【问题讨论】：

还附上了你所拥有的 sass 代码
我添加了 sass 代码，但我认为它无关紧要
我觉得上面的代码没问题。你确定你从这个特定的文件中得到这个错误
尝试删除此代码，看看错误是否仍然存在
当我删除代码或在style 标签内添加分号或使用常规 CSS 时，它不会抛出错误

标签： node.js vue.js webpack sass

【解决方案1】：

如果有人有兴趣，我在我的 vue utils 文件中重复了相同的步骤，它解决了问题

【讨论】：