-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
Closed
Labels
enhancementintend to implementThe team has the intention to implement this feature at some point. Contribution is also welcome.The team has the intention to implement this feature at some point. Contribution is also welcome.
Description
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. :)
FFxSquall, chanlito, aldarund, Lanchi, robsterlini and 5 morechanlito, johnsmithjsjs, AdmiralPotato and sadeghmohebbi
Metadata
Metadata
Assignees
Labels
enhancementintend to implementThe team has the intention to implement this feature at some point. Contribution is also welcome.The team has the intention to implement this feature at some point. Contribution is also welcome.