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

Question

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

确切的错误是：

./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。