vue-cli and sass-loader@8 incompatibility #4513
Comments
|
Same problem here. My output of the log looks the same. |
|
For the record, we install |
|
You're absolutely right, but maybe it's worth to make 4.0 compatible with new sass loader? Since the stable version is not released yet, so it's the last moment to update it as I guess otherwise we will have to wait for vue-cli 5? |
|
I had issue with 'data' in sassLoader. Apparently they renamed it to 'prependData' and did some changes, so you would have to look into their documentation or read the output. I use Node, not Yarn. |
|
I've got the same problem what's the solution ? I can't build Vuetify module in my project ... |
Would you mind sharing the project repo? I am interested what is happening there. Seems like 8.0.0 sass loader broke a lot of projects. |
@jacquesmatthieu have you tried following the description in the OP? If you find problems along the way, ask more specifically. Or simply use sass-loader v7, which is the version we installed for you initially, and which is the version we support right now. |
|
@SavkaTaras I can't share the repo sorry. @LinusBorg I've got downgrade to sass-loader and it works. Thx you ! |
vuetify 설치중 sassloader 문제 발생 vuejs/vue-cli#4513 2일전에 올라온 vue-cli와 sass-loader의 비호환성 문제인듯, App.vue에 <style></style> 태그를 넣지 않으면 발생한다고하는데, 태그를 추가했으나 문제가 해결되지 않음 error log error in ./node_modules/vuetify/src/components/VDataTable/VDataTable.sass Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'indentedSyntax'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate (C:\Users\mor22\cleanCode\professor-lol\professorlol-web\src\front\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11) at Object.loader (C:\Users\mor22\cleanCode\professor-lol\professorlol-web\src\front\node_modules\sass-loader\dist\index.js:36:28)
|
Having the same issue: I upgraded to 4.0 cause I thought I read that would fix it, but apparently that's not the case. |
|
I have removed also row: fiber: require('fibers'), from file webpack.config.js in sass-loader |
|
Yeah thanks for reminding |
|
It's supported in 4.0.0-rc.3 and 3.12 |
|
I solved creating the "webpack.config.js" .
|
|
Ok, wait, whaaat am I supposed to do if I have this error? Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
|
|
Replace data with "prependData". |
In which file? webpack.config.js?
But I thought it was merged? |
|
They likely haven't upgraded to 3.12 |
In my case, I had to modify my export in vue.config.js (configureWebpack.css.loaderOptions.scss.data -> configureWebpack.css.loaderOptions.scss.prependData). Here's the complete file for context: const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');
module.exports = {
assetsDir: 'src/assets',
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options['transformAssetUrls'] = {
img: 'src',
image: 'xlink:href',
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
return options
})
},
configureWebpack: {
plugins: [
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './src/index.html'),
path.join(__dirname, './**/*.vue'),
path.join(__dirname, './src/**/*.js')
])
})
]
},
css: {
loaderOptions: {
scss: {
prependData: '@import "@/scss/variables.scss";'
}
}
},
pwa: {
name: 'Acme',
themeColor: '#5f4884',
msTileColor: '#5f4884'
}
}; |
|
@nstuyvesant I have been having problems similar to others on this list and I too use Vuetify so I jumped at the chance to try your config. Sadly for me it fails with effectively no message or stack trace.
I presume the above config is working for you or have you made some adjustments since then? Also can you confirm that you're using Vuetify 2.x? |
|
@ksnyde - in my case, I'm not using Vuetify - just bootstrap-vue. My config has not changed. |
|
I think the actual actionable issue here is that following these instructions: https://cli.vuejs.org/guide/css.html#pre-processors Causes 8.x to be installed. Downgrading to 7.x works fine for me. |
|
@johnsusek Thank you, you solved my problem! |
Hi , di d you fixed this? |
|
So, according to the migration guide, you're supposed to "take a look at the v8 release and upgrade to the latest version" but it's not actually supported... That's super odd. |
It is working perfectly |
|
running Note: following suggestions for solutions in this repo, I also added package.json: |
|
No other option available than downgrade? |
|
fixed by changing prependData -> additionalData |
|
@NaokiOtsu Your post solved my problem! Very thanks! |
How come I got into the same error but I'm already using |
Hi. This seems to work for me but I have multiple scss files. How would I import multiple scss files? |
How would I import multiple scss files in the prependData? Thanks. |
|
The fix for this is to create a vue.config.js file or use the one already created if you can find it and then fill it with the below. Note that this fix is for folks using the vue cli css: { } in your main.scss, import all your mixins and variable files. If you don't want to follow this approach, you could make prependData a function, loop through an array of all your '@import' statements and return each of the files out of the for loop block. Like below: css: { } |
Sass loader on npm install automatically updates to latest version, and there's a known issue at [1]. Fix this by downgrading sass-loader. Links: 1. vuejs/vue-cli#4513
Sass loader on npm install automatically updates to latest version, and there's a known issue at [1]. Fix this by downgrading sass-loader. Links: 1. vuejs/vue-cli#4513
|
I do not know if it is this issue (it is the one that looks the most).
vue create frontend
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? No
vue add vuetify
? Choose a preset: Default (recommended)
WARN conflicting versions for project dependency "sass-loader":
- ^8.0.2 injected by generator "undefined"
- ^10.0.0 injected by generator "vue-cli-plugin-vuetify"
Using newer version (^10.0.0), but this may cause build errors.
98% after emitting CopyPlugin
ERROR Failed to compile with 1 error 11:51:32 AM
error in ./node_modules/vuetify/src/components/VSelect/VSelect.sass
Syntax Error:
position: relative
^
Expected identifier.
╷
68 │ position: relative
│ ^
╵
stdin 68:25 root stylesheet
in /home/avi/Downloads/frontend/node_modules/vuetify/src/components/VSelect/VSelect.sass (line 68, column 25)
@ ./node_modules/vuetify/src/components/VSelect/VSelect.sass 4:14-208 15:3-20:5 16:22-216
@ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
@ ./node_modules/vuetify/lib/components/VAutocomplete/VAutocomplete.js
@ ./node_modules/vuetify/lib/components/VAutocomplete/index.js
@ ./src/App.vue
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://192.168.1.161:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.tsI tried to create a webpack file, downgrade the version of Sass-Loader.. but nothing work. |
|
@av1m install |
|
Omg, I spent hours on this problem. Thank you so much !! |
and others
Version
4.0.0-rc.0
Reproduction link
https://github.com/jacekkarczmarczyk/vue-cli-sass-loader-repro
Environment info
Steps to reproduce
Clone the repo and run
yarn && yarn buildWhat is expected?
Successfull build
What is actually happening?
Error goes off when you remove
<style>section from App.vueIt also worked when I removed
in https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/css.js#L21 and changed
to
in https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/css.js#L181
The text was updated successfully, but these errors were encountered: