Compiling a codebase with SCSS and SASS files results in syntax error

[gkatsanos]

Version

15.7.1

Reproduction link

https://codesandbox.io/s/mj55qk20v

I am using https://github.com/rails/webpacker/ which makes it practically impossible to create a min repro link

Steps to reproduce

Hoping this won't be closed.. I am creating this issue because I saw other issues with the same problem and I also read this : https://vuetifyjs.com/en/customization/sass-variables#single-file-components . It seems there's a real issue with how vue-loader is handling a combination of SASS/SCSS files? Could you confirm?

1. follow the documentation on https://vue-loader.vuejs.org/guide/pre-processors.html#sass
2. I am using https://github.com/rails/webpacker/ which means I can add configuration to Webpack using their "API"
3. I added the recommended configuration from vue-loader docs:

environment.loaders.append('scss', {
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true
        // data: `@import "app/javascript/manager/styles/main.scss";`
      }
    }
  ]
})

environment.loaders.append('sass', {
  test: /\.sass$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true
      }
    }
  ]
})

My codebase has both SASS and SCSS syntax files.

compilation result:

ERROR in ./app/javascript/manager/components/gateway/form.sass?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/sass-loader/lib/loader.js??ref--9-2!./app/javascript/manager/components/gateway/form.sass?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:4) Unknown word

> 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
    |    ^
  2 |
  3 | // load the styles


ERROR in ./node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/sass-loader/lib/loader.js??ref--9-2!./node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    @content($material-light)
   ^
      Invalid CSS after "    @content": expected "}", was "($material-light); "
      in /Users/george/repos/mh-platform/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)

ERROR in ./node_modules/vuetify/src/components/VToolbar/VToolbar.sass (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/sass-loader/lib/loader.js??ref--9-2!./node_modules/vuetify/src/components/VToolbar/VToolbar.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

What is expected?

Compilation succesful

What is actually happening?

ERROR in ./app/javascript/manager/components/gateway/form.sass?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/sass-loader/lib/loader.js??ref--9-2!./app/javascript/manager/components/gateway/form.sass?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:4) Unknown word

> 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
    |    ^
  2 |
  3 | // load the styles


ERROR in ./node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/sass-loader/lib/loader.js??ref--9-2!./node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    @content($material-light)
   ^
      Invalid CSS after "    @content": expected "}", was "($material-light); "
      in /Users/george/repos/mh-platform/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)

ERROR in ./node_modules/vuetify/src/components/VToolbar/VToolbar.sass (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/sass-loader/lib/loader.js??ref--9-2!./node_modules/vuetify/src/components/VToolbar/VToolbar.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

[LinusBorg]

This works well, in a non-webpacker setup.

Having zero experience with webpacker, a quick look at its docs tells me that it comes preconfigured to parse sass.

so my first assumption would be that by adding your own sass config on top of the existing one, both actually run sequentially (webpack always runs all rules whose test: regex match for a given file). That means the processed output of vue-style-loader (from your config) is being fed as the input of the second config - but at that point, it's not sass anymore so it throws errors.

Essentially, you're now processing every sass file twice. It might be enough to actually remove the default config for sass files before adding your own.

So this is seems more related to how one correctly adjusts/extends webpacker's webpack config than a problem related to vue-loader

[gkatsanos]

I suspected a similar thing, that I'm not replacing webpacker's config but rather extending it (It appears .append does a this.push({ key, value }) under the hood ). Having said that I didn't see any default SASS parsing in webpacker, but I will give a shot at deleting its config before adding my own and give it one more try and add a new comment here accordingly.
Thanks!

[LinusBorg]

https://github.com/rails/webpacker/blob/master/docs/css.md

[gkatsanos]

https://github.com/rails/webpacker/blob/master/docs/css.md

Let's see if this behaviour can be overridden .. In any case not a vue-loader issue (I'll close this ASAP)

[gkatsanos]

I nuked the pre-configured css/sass/scss rules with:

environment.loaders.delete('sass')
environment.loaders.delete('moduleSass')
environment.loaders.delete('moduleCss')
environment.loaders.delete('css')

it was the happiest 4 lines I had to code. Now it compiles! No sourceMaps though , and I couldn't find any info in the vue-loader doc. But I'll close and keep looking!
PS: Thanks Thorsten