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

Which vuetify version do you use?

Roman Alekseiev
– Roman Alekseiev

2019-11-14 12:28:05 +00:00
Commented Nov 14, 2019 at 12:28 — Roman Alekseiev
– Roman Alekseiev, Commented Nov 14, 2019 at 12:28
Vuetify version is 2.1.9

priosshrsth
– priosshrsth

2019-11-14 15:34:57 +00:00
Commented Nov 14, 2019 at 15:34 — priosshrsth
– priosshrsth, Commented Nov 14, 2019 at 15:34

Amir Ur Rehman · Accepted Answer · 2019-11-14 13:20:03Z

6

install these two plugins.

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

answered Nov 14, 2019 at 13:20

Amir Ur Rehman

6801 gold badge9 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

priosshrsth Over a year ago

I do have those plugins installed. I have solved the problem anyway. It worked after removing fiber and indentedSyntax. Thanks for answering though.

ihor.eth Over a year ago

he is using dart-sass (sass) and you are recommending to install node-sass ?

priosshrsth · Accepted Answer · 2019-11-14 15:42:58Z

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.

answered Nov 14, 2019 at 15:42

priosshrsth

1,1782 gold badges16 silver badges32 bronze badges

1 Comment

ihor.eth Over a year ago

Note that when using sass (Dart Sass), synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers package to call asynchronous importers from the synchronous code path.

Collectives™ on Stack Overflow

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

My `environment.js` file

VuetifyLoader.js file

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My environment.js file

VuetifyLoader.js file

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

My `environment.js` file