VueJs Hackernews 2.0 中的 Sass 代替 Stylus答案

【问题标题】：Sass instead of Stylus in VueJs Hackernews 2.0VueJs Hackernews 2.0 中的 Sass 代替 Stylus
【发布时间】：2019-09-02 17:09:04
【问题描述】：

我已经克隆并安装了这个 VueJs SSR 应用程序（由 Vuejs 社区自己创建）：

https://github.com/vuejs/vue-hackernews-2.0

我想将 CSS 预处理器从 stylus 更改为 Sass，所以我所做的是：

安装 sass 依赖项：

npm install -D sass-loader node-sass

将规则添加到 webpack 配置 (build/webpack.base.config.js)：

rules: [
      // ... other rules omitted

      // this will apply to both plain `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]

当我运行npm run dev 时出现此错误：


 ERROR  Failed to compile with 1 errors                                                                       5:54:17 PM

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module parse failed: Unexpected token (13:5)
You may need an appropriate loader to handle this file type.
| 
| 
| body {
|   background: #000
| }

【问题讨论】：

标签： vue.js

【解决方案1】：

根据official documentation，您的 vue-loader 配置看起来很完美。但是在您的 CSS 中，您缺少分号你必须改变这个：

body {
  background: #000
}

到这个：

body {
  background: #000;
}

【讨论】：