Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
cadriel opened this issue Jun 7, 2019 · 7 comments

Comments

@cadriel
Copy link

commented Jun 7, 2019

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;

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

This comment has been minimized.

Copy link
Author

commented Jun 7, 2019

I imagine changing line above to;

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

might be a viable solution?

@KaelWD

This comment has been minimized.

Copy link

commented Jul 11, 2019

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

This comment has been minimized.

Copy link

commented Jul 11, 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!

@KaelWD

This comment has been minimized.

Copy link

commented Jul 13, 2019

Invalid in .scss files:

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

Invalid in .sass files:

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

sodatea added a commit to sodatea/vue-cli that referenced this issue Jul 31, 2019

@sodatea sodatea closed this in #4386 Aug 2, 2019

sodatea added a commit that referenced this issue Aug 2, 2019

@vkaracic

This comment has been minimized.

Copy link

commented Aug 18, 2019

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

@sodatea

This comment has been minimized.

Copy link
Member

commented Aug 21, 2019

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

sodatea added a commit that referenced this issue Aug 21, 2019

@sodatea

This comment has been minimized.

Copy link
Member

commented Aug 21, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.