启动项目时报错:File to import not found or unreadable: ./src/assets/css/variables.scss.
ERROR Failed to compile with 1 error
error in ./src/styles/element-variables.scss
Syntax Error:
@import "~element-ui/packages/theme-chalk/src/index";
^
File to import not found or unreadable: ~element-ui/packages/theme-chalk/src/index.
- 提示语:需要在配置文件中指定 variables.scss 的位置。
- 解决方法:调整 sass 版本
“node-sass”: “^4.14.1”,
“sass-loader”: “^7.1.0”,
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.1.0 --save-dev
- 调整 vue.config.js 配置
在 vue.config.js 配置文件中添加如下 scss 的配置:
module.exports = {
css: {
loaderOptions: {
sass: {
data: ` @import "./src/assets/css/variables.scss";
@import "./src/assets/css/mixin.scss";
`
},
scss: {
prependData: ` @import "~@/variables.scss"; `
}
}
}
}