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

Question

I am trying to use vue js in rails. Everything works, except when I tried to use <style> inside .vue component

The exact error is:

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

My environment.js file

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 file

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
        },
      },
    },
  ],
}

Solution 1

So, the problem was with fiber and indentedSyntax. After removing those two, everything works as expected. I was getting lots of error related to scss like like

expected new line

in sass files inside node_modules. I don't know, why vuetify recommends to use fiber in sass loader.

Solution 2

install these two plugins.

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