Vue Config won't accept independent loaderOptions for both `scss` and `sass`.

[cadriel]

Version

3.8.2

Reproduction link

https://github.com/cadriel/vue-cli-sass-scss-issue

Environment info

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 10.15.3 - /usr/local/var/nodenv/versions/10.15.3/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/var/nodenv/versions/10.15.3/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: Not Found
    Safari: 12.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.8.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.8.0
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0
    @vue/cli-plugin-eslint: ^3.8.0 => 3.8.0
    @vue/cli-service: ^3.8.0 => 3.8.0
    @vue/cli-shared-utils:  3.8.0
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 3.5.5

Steps to reproduce

$ git clone git@github.com:cadriel/vue-cli-sass-scss-issue.git
$ cd vue-cli-sass-scss-issue
$ yarn install
$ yarn serve

# Note errors.
# To remove the errors, modify the vue.config.js files data line to;
# data: '@import "~@/sass/main.scss";'

What is expected?

You should be able to have both sass and scss styles in a project concurrently, along with the ability to define loaderConfig for each.

What is actually happening?

The project fails to compile because the vue config references a sass formatted file - yet the HelloWorld component has scss styles.

Because the loaderConfig applies to both scss and sass an error is thrown.

---

A solution might be to add distinct loaderConfig for both scss and sass. You can see that these configurations are not distinct currently here;

vue-cli/packages/@vue/cli-service/lib/config/css.js

Line 168 in 1ff22d2

createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, loaderOptions.sass))

This is primarily an issue when you're depending on external projects that say use sass formatted styles, but your own project uses scss. I'm looking at you Vuetify 2.0. :)

[cadriel]

I imagine changing line above to;

createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, loaderOptions.scss))

might be a viable solution?

[KaelWD]

https://discordapp.com/channels/340160225338195969/361889521815519233/598165002691543040

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/_variables.scss";`,
      },
    },
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('sass').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: `@import '~@/sass/_variables.scss'` }))
    })
  }
}

[rafaelmaiach]

Hi @KaelWD, I implemented this chainWebpack config changing rule('sass') for rule('scss') and importing my main.scss at the end and it worked with my Vuetify 2 app.
In this case, I created a color.scss file and added it to the css loader options and it worked.

This problem with scss/sass was because of using scss and importing a sass inside of it? (in my main.scss).

I'd like to get a better understanding of this solution.

Thank you!

[KaelWD]

Invalid in .scss files:

@import "~@/sass/_variables.scss" // Error: missing semicolon

Invalid in .sass files:

@import "~@/sass/_variables.scss"; // Error: unexpected ;

[vkaracic]

@sodatea this still happens for me on 4.0.0-beta.3 release.