在 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&) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected newline.

我的`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 相关的错误，例如喜欢

expected new line

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

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

Using <style lang="scss"> in vue component gives error

ruby-on-rails

vue.js

webpack

sass

webpacker

我的`environment.js`文件

VuetifyLoader.js 文件

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

Using <style lang="scss"> in vue component gives error

ruby-on-rails

vue.js

webpack

sass

webpacker

我的environment.js文件

VuetifyLoader.js 文件

我的`environment.js`文件