vue+element项目启动报错element-variables.scss问题_error in ./src/styles/element-variables.scss

启动项目时报错：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.
12345678
1
2
3
4
5
6
7
8
9

• 提示语：需要在配置文件中指定 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
123456
1
2
3
4
5
6
7

• 调整 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"; `
      }
    }
  }
}
1234567891011121314
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15