[Bug Report] Vuetify 2.0 Errors "expected {" and "expected new line" on vuetify sass files

[ShlomitSibony]

Environment

Vuetify Version: 2.0.3
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

npm i vuetify
npm i vue
add plugins/vuetify.js as in reproduction link
add sass/main.scss as in reproduction link
add css/sass sections to vue.config.js as in reproduction link
add vuetify to main.ts (new Vue) as in reproduction link

Expected Behavior

SASS files build success

Actual Behavior

SASS files build failed

errors on many vuetify sass files, for example:

error  in ./node_modules/vuetify/src/components/VCounter/VCounter.sass
Module build failed (from ../node_modules/sass-loader/lib/loader.js):
undefined
Expected newline.
var content = require("!!../../../../css-loader/index.js!../../../../sass-loader/lib/loader.js??ref--14-2!./VCounter.sass");

stdin 5:124  root stylesheet
in C:\Users\ssibony\Desktop\WORK\Vue Projects\checklist\node_modules\vuetify\src\components\VCounter\VCounter.sass (line 5, column 124)

Reproduction Link

https://codesandbox.io/s/vue-template-5xs2r

Other comments

The Project was created with Vue CLI 2 and I'm using @vue/cli-service 3.0.3,
according to vuetify documentation it is possible to use a project which was created with vue cli 2: https://vuetifyjs.com/en/getting-started/quick-start#existing-applications

[johnleider]

Please read the FAQ

[dcb99]

@johnleider it's pretty uncool that this was closed with nothing more than a link to the FAQ page. I'm having the exact same issue but I'm upgrading an existing project and haven't used vue-cli. I have gone over the FAQ and I still have this problem.

[KaelWD]

@ShlomitSibony @dcb99 #7950 (comment)

[ShlomitSibony]

@KaelWD My project was created with vue CLI 2 as I mentioned above

[KaelWD]

Did I stutter?

[ShlomitSibony]

@KaelWD Thank you! It works now, deleted the configuration for sass-loader :) although the fact is not well written in the documentation so maybe it should be added there..

I have another question regarding the sass/main.scss file (vuetify documentation), I've changed the setting to point vuetify-loader instead of creating the sass/main.scss file:

css: {
    loaderOptions: {
      sass: {
        data: `@import "~vuetify-loader/dev/src/_variables.scss"`
      },
    },
    sourceMap: true
  },
  chainWebpack    : config => {
    // config.plugins.delete('prefetch'); //solves a bug in current vue-cli that loads all js files even when has lazy loading
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
            .tap(opt => Object.assign(opt, { data: `@import '~vuetify-loader/dev/src/_variables.scss';` }))
    });

Do you think it's a good practice or should I hold that extra file?

Thanks

[corganhejijun]

@ShlomitSibony, I have the same problem. And after one whole night of trying and I found that it's not the vuetify problem.
I came across the webpack generated code piece of utils.js shown below

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    //sass: generateLoaders('sass', { indentedSyntax: true }),  // comment this line!!!
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}

comment the sass related line, which means the default way of processing the sass files which generate the problem this issue described, and then add the FAQ sass-loader config to the webpack.base.conf.js.

[zhenhao-ma]

Try to remove the " indentedSyntax: true " from the webpack.config.js sass rules

The official document requires you to add this code inside the rules of webpack.config.js:
{ 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 }, }, }, ], },

instead, you can try:
{ test: /\.s(c|a)ss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', // Requires sass-loader@^8.0.0 options: { implementation: require('sass'), sassOptions: { fiber: require('fibers') }, }, }, ], },
Hope it works for you (at least it works for me)

[pgupt]

So I figured out how it will work and at the same time how dumb I am.
Looking at the FAQ page I thought I just had to copy this to my webpack.renderer.config.js.

// webpack.config.js

module.exports = {
  rules: [
    {
      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 // it is important to keep only 1
      options: {
        implementation: require('sass'),
        sassOptions: {
          fiber: require('fibers'),
          indentedSyntax: true // optional
           },
         },
       },
     ],
    },
  ], 
}`

But that's not it.
You need to remove other rules stating sass and scss.

For me, I remove the following lines:

        {
            test: /\.scss$/,
            use: ['vue-style-loader', 'css-loader', 'sass-loader']
        },
        {
            test: /\.sass$/,
            use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
        },

[Adrian-Fang]

Guess you are also Adding vuetify to an older project with webpack 4; thanks to the friends solutions above, I've solved mine by following steps:

• 2 files you need to take care of utils.js & webpack.base.conf.js

//build/utils.js
...
//comment the two lines, about generating loaders for sass and scss
return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
...

//build/webpack.base.conf.js
//comment all other test rules for \.css$ files
{
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                fiber: require('fibers'),
                // indentedSyntax: true
              },
            },
          },
        ],
 },