启动项目时报错: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"; `
      }
    }
  }
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐