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

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 [e-mail]: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; https://github.com/vuejs/vue-cli/blob/1ff22d2a51bfd62f851a8baae2027ae5e18488ea/packages/%40vue/cli-service/lib/config/css.js#L168

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

[KaelWD]

Invalid in .scss files:

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

Invalid in .sass files:

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

[sodatea]

@vkaracic In 4.0.0-beta.3 we have added a scss option, that means, you can configure them separately:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/_variables.sass"`,
      },
      scss: {
        data: `@import "~@/sass/_variables.scss";`,
      }
    }
  }
}