写在前面
环境弄了大半天，网上查了很久，整理一下
版本问题
报错如下：
# [Syntax Error:<template>^ File to import not found or unreadable: ./src/assets/css/variables.scss](https://www.cnblogs.com/cnwcl/p/15364901.html)
就按照大家说的降版本，我最后的环境版本是这样的
"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
配置问题
报错如下,按照网上的配置在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";`
}
}
}
}
可以运行的正常的config配置
module.exports = {
css: {
loaderOptions: {
scss: {
data: `@import "~@/common/css/global.scss";`
}
}
}
}
原因在这里！！！！我用的7.X版本，所以用的是data，vue3也不一定就是prependData的！看自己的版本修改！
sass-loader版本不同
sass-loader v8以下版本 这个选项名为“data”
sass-loader v8版本 这个选项名为“prependData”
sass-loader v10以上版本 这个选项名为 “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 设置全局Css变量
vue.config.js配置项以及注意事项（vue3）
