Sass-loader 8.0.0 not working with Vue-cli 3 #4526
Comments
|
It's working on vue-cli 4.0.0-rc.0 |
|
Duplicate of #4513 (kinda) |
|
|
haoqunjiang
added
the
needs reproduction
|
I can confirm this issue. |
|
I get a slightly different error when trying to upgrade to It looks like it's complaining about this line now in Sass 8.0. |
|
Supported in 4.0.0-rc.3 |
|
Still got problems with newest versions of Vuetify and sass-loader: Here is my pacakge.json file: https://gist.github.com/Chris2011/b4a5f0651f6abb09064a356848624655 First I had m own config part: But then I got the error with the unknown property |
|
For global I use @vue/cli 3.11.0. In my project I also tried @vue/cli-service 4.0.0-rc.6, still no luck. When I switch to rc.6 and I uncomment the css loaderOptions, I got this error: |
|
Does anyone of the commenters solved that problem? |
|
CLI v3 works with sass-loader v7 only at the moment. You can downgrade it for now. With CLI v4 + sass-loader v8 it’s |
|
I updated now everything, my global vue cli (don't know whether it is needed or not) and the sass-loader to 8.0.0. Now I got this error: So this is now the problem with mixed sass and scss, but first I installed sass-loader and second I already used the loaderOptions scss, and not sass. I already commented here, couple of days ago: #4116 |
|
My case is, I need a newer version of vuetify, before I got the problems, I used 1.5.*, but it has less features so I updated vuetify for that. Just to let you know what I need. |
|
Got it. It's a bug. See #4637 I'll soon release a new version. Next time, please open a new issue with a runnable reproduction; that will help us locate the problem more quickly. |
|
Ok, thx for your help and sry for the inconvenience :) |
|
Fixed in rc.7. |
Just wanted to mention: I'm using Note: the |
|
@sodatea thx for the fix. It is working now :) |
|
Getting the same error when using sass-loader 8 with vuetilfy and electron |
Where exactly is this change to be made? Thanks! getting a bunch of this (or similar): |
|
I'm just a simple regular user of vue-cli. I updated my project today to 4.0.1 but I get a yellow warning on I added that css stanza to my vue-config.js but it does not fix the problem. This bug should be re-opened and the title changed to Vue-cli 4. |
don't upgrade! It (vuetify) only works with sass-loader 7.1.0! (just tested it and works with 7.1 ;) ) |
|
@pdoria, well as I said it works (my sass-loader is v7.3.1) but that not's the point. The vue-cli release notes, and that prominent yellow warning, say to update sass-loader to v8. |
This works for me.. just put |
where exactly do you place those codes |
@kagz |
|
if you use material or something else which uses sass down in the modules you have to add one line to the above : module.exports = { |
|
Here's a definitive solution to those who have run into this problem:
|
|
@jaiko86 - thanks man, that helped a lot. I had to add semicolon to make the scss work, this is my working config - also with node modules scss files import enabled. module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: {
includePaths: [
'./node_modules'
]
},
prependData: `@import "@/styles/global.scss";`,
},
},
},
}; |
|
Hi, |
|
The solution provided by @jaiko86 is not working for me... I'm using I also tried to downgrade sass-loader to 7.3.1, but with no luck |
Hi, i have the same version and it's working using the @jaiko86 configuration, but you should also include sassOptions attribute to load node_module directory just like @JakubHromada example when your scss files are imported from installed components. This is my configuration: where main.scss has imports from node_modules path |
Hey did you find a fix for electron? |
|
Should be replaced prependData with additionalData. This is how it works: module.exports = { It doesn't work like that: |
|
problem solved for me with sass-loader 10.0.4 with additionalData not prependData |
|
I have no idea how this is working for you guys. This is how it currently looks and isn't working: These are my dependencies: I tried to just @import the SCSS file into the <style> element on the Vue component then I started getting this error: Then I change "additionalData" to "prependData", and it loads the SCSS file import via the component import in the <style> element and as soon as I remove the <style> element import to rely on the @import in the vue.config.js file, nothing loads again. Then I downgraded to version 7 of sass-loader but I still couldn't get the vue.config.js file to include anything. I've tried upgrading to version 9 of sass-loader and it still doesn't work with additionalData. I've tried moving my theme folder into the assets folder to see if it was maybe a pathing issue. Still didn't work. I've tried downgrading my vue-cli version to 4.5.1 to be more in line with the last post on this issue, and it still doesn't work. I've tried the above with version 7 of sass-loader as well. I created the project through the CLI (v4) and I installed Vue 2 with the router, SCSS and TypeScript. Then I installed Vuex and some helper libs for Vuex. This is the file I'm trying to include:
It feels like I'm missing something here? Is it maybe that the purpose of this additionalData is only to load in variables to be consumed by inline <style> rules or file imports? I was under the impression that I could import a theme index.scss file with further imports. I've tried the following as well, with no luck: Anyway, my workaround for now is just to do the following: vue.config.js: RoutinePlanner.vue (The view loaded in my routing which contains the subsequent components where the styles are relevant: |
Same situation here. any help? |
|
@edu-aguilar I think this thread has been abandoned. Did my workaround work for you? I've just made peace with doing it that way. |
|
опять трансгендерные олени-смузихлебы на самокатах все сломали |
and others
Version
3.11.0
Environment info
Steps to reproduce
Install Sass-loader 8.0.0 and try to configure it to prependData in the vue.config.js - this does not work.
What is expected?
This is working using v7.3.1 of sass-loader
What is actually happening?
This is not working using version 8.0.0:
I tried solving this using the chain webpack interface but didn't have much luck.
The text was updated successfully, but these errors were encountered: