在 vue 组件中使用 <style lang="scss"> 会出错

Question

我正在尝试在 Rails 中使用 vue js。一切正常，除非我尝试在<style>里面使用.vue component

确切的错误是：

./app/javascript/layouts/dashboard.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js! ./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js??ref-- 5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./node_modules/vue- loader/lib??vue-loader-options!./app/javascript/layouts/dashboard.vue?vue&type=style&index=0&lang=scss&) 模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js） ：SassError：预期换行符。

我的environment.js档案

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')

const vueLoader = require('./loaders/vueLoader')
const vuetifyLoader = require('./loaders/vuetifyLoader')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())

environment.loaders.prepend('vue', vueLoader)

environment.loaders.prepend('vuetify', vuetifyLoader)

const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

environment.config.merge(resolver)

module.exports = environment

VuetifyLoader.js 文件

module.exports = {
  test: /\.s(c|a)ss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      // Requires sass-loader@^7.0.0
      options: {
        implementation: require('sass'),
        fiber: require('fibers'),
        indentedSyntax: true // optional
      },
      // Requires sass-loader@^8.0.0
      options: {
        implementation: require('sass'),
        sassOptions: {
          fiber: require('fibers'),
          indentedSyntax: true // optional
        },
      },
    },
  ],
}

Answer 1

安装这两个插件。

npm install --save node-sass
npm install --save sass-loader

Answer 2

所以，问题出在fiber和上indentedSyntax。删除这两个后，一切都按预期进行。我收到很多与 scss 相关的错误，例如

预计新线

在node_modules内的sass文件中。我不知道，为什么 vuetify 推荐在 sass loader 中使用 Fiber。