vue-cli: 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 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; 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. 😃

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 14
Comments: 18 (9 by maintainers)

Commits related to this issue

feat: allow configuring scss options separately from sass closes #4116 — committed to sodatea/vue-cli by sodatea 5 years ago
feat: allow configuring scss options separately from sass (#4386) closes #4116 — committed to vuejs/vue-cli by sodatea 5 years ago
feat: allow configuring scss options separately from sass (#4386) closes #4116 (cherry picked from commit 930b4596b15de9e9743b998d2680f54f706a2a4a) — committed to vuejs/vue-cli by sodatea 5 years ago

Most upvoted comments

@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";`,
      }
    }
  }
}

+14

sodatea on Aug 21, 2019

Invalid in .scss files:

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

Invalid in .sass files:

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

+14

KaelWD on Jul 13, 2019

This feature has also been landed in v3 with today’s release of v3.11.0

sodatea on Aug 21, 2019

@kdamiani is it possible that one of your modules is using sass? My @import "@/styles/_variables.sass" is an empty file because vuetify uses sass and needs it.

FossPrime on Sep 6, 2019

@kdamiani

My solution was to update @vue/cli-service to 3.11.0 and modify the vue loader config

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.sass"`
      },
      // pass options to sass-loader
      scss: {
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`
      }
    }
  },

FossPrime on Sep 6, 2019

@rayfoss Have you updated the @vue/cli-service package in your project?

sodatea on Aug 22, 2019

@kdamiani

My solution was to update @vue/cli-service to 3.11.0 and modify the vue loader config

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.sass"`
      },
      // pass options to sass-loader
      scss: {
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`
      }
    }
  },

Works for me, thanks

camarvito on Oct 21, 2020

@rayfoss damn… yes… You’re right… my mistake. I have now included an empty sass file - works! Thank you!

kdamiani on Sep 6, 2019

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!

rafaelmaiach on Jul 11, 2019