在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中使用光纤。