寫在前面
環(huán)境弄了大半天，網(wǎng)上查了很久虑鼎，整理一下
版本問題
報錯如下：
# [Syntax Error:<template>^ File to import not found or unreadable: ./src/assets/css/variables.scss](https://www.cnblogs.com/cnwcl/p/15364901.html)
就按照大家說的降版本返干，我最后的環(huán)境版本是這樣的
"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",
"axios": "^0.27.2",
"core-js": "^3.6.5",
"element-plus": "^2.2.10",
"nprogress": "^0.2.0",
"vue": "^3.0.0",
"vue-axios": "^3.4.1",
"vue-router": "^4.1.2",
"vuex": "^4.0.2"
"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",
npm uninstall node-sass --save-dev
npm install node-sass@4.14.1 --save-dev
npm uninstall sass-loader --save-dev
npm install sass-loader@7.3.1 --save-dev
配置問題
報錯如下,按照網(wǎng)上的配置在vue.config.js中配置總是不成功
Syntax Error:
<el-menu
^
Undefined variable: "$topNavTextColor".
in /Users/cm/Downloads/cm/interface-web/src/views/nav/NavMenu.vue (line 3, column 11)
@ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/nav/NavMenu.vue?vue&type=style&index=0&id=0b400e28&lang=scss 4:14-459 15:3-20:5 16:22-467
異常的config配置
vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/common/css/global.scss";`
}
}
}
}
可以運(yùn)行的正常的config配置
module.exports = {
css: {
loaderOptions: {
scss: {
data: `@import "~@/common/css/global.scss";`
}
}
}
}
原因在這里＜さ印Ｎ⑼酢！兼耀！我用的7.X版本艘狭，所以用的是data，vue3也不一定就是prependData的翠订！看自己的版本修改巢音！
sass-loader版本不同
sass-loader v8以下版本 這個選項(xiàng)名為“data”
sass-loader v8版本 這個選項(xiàng)名為“prependData”
sass-loader v10以上版本 這個選項(xiàng)名為 “additionalData”
參考記錄
Syntax Error:<template>^ File to import not found or unreadable: ./src/assets/css/variables.scss
npm報錯File to import not found or unreadable: @/assets/styles/global.scss.
Vue 設(shè)置全局Css變量
vue.config.js配置項(xiàng)以及注意事項(xiàng)（vue3）
