vue npm 报错 /src/styles/element-variables.scss_./src/styles/element-variables.scss

通过修改sass变量、class，全局修改element-ui样式。

1.安装sass

1. 查看自己的 node 版本
   node -v

2.判断情况
当 node 版本低于 14 时，安装以下两个版本，
“node-sass”: “4.14.0”,
“sass-loader”: “7.1.0”

当 node 版本为16x 时，安装以下两个版本
“node-sass”: “6.0.1”,
“sass-loader”: “10.2.0”

2.新建一个样式文件
例如 element-variables.scss，写入以下内容：

/* 改变主题色变量 */
$--color-primary: teal;
 
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
@import "~element-ui/packages/theme-chalk/src/index";
3.找到样式文件
node_nodules/element-ui/packages/theme-chalk/src/common/var.scss
1
2
3
4
5
6
7
8
9
10

找到需要修改的样式，复制到element-variables.scss中。

修改scss变量:

/* 改变主题色变量 */
$--color-primary: red;
 
/*改变button*/
$--button-font-size:64px;
 
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
@import "~element-ui/packages/theme-chalk/src/index";
1
2
3
4
5
6
7
8
9
10

4.import scss文件
在main.js中import ‘./styles/element-variables.scss’;

5.按需引入
main.js:

 
import Vue from 'vue'
import App from './App.vue'
import Button from 'element-ui/lib/button';
import './styles/element-variables.scss';
Vue.use(Button)
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')
 
 
 
element-variables.scss:
 
/* 改变主题色变量 */
$--color-primary: red;
 
/*改变button*/
$--button-font-size:64px;
 
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
@import "~element-ui/packages/theme-chalk/src/button";
 
 
 
babel.config.js:
 
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
  //   [
  //     "component",
  //     {
  //       "libraryName": "element-ui",
  //       "styleLibraryName": "theme-chalk"
  //     }
  //   ]
   ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

如果有修改scss变量无法修改的样式
推荐使用组件化

可以直接覆盖element的class

.el-card{
    &__header {
        padding: 5px 10px;
    }
}
/* 改变主题色变量 */
$--color-primary: red;
 
/*改变button*/
$--button-font-size:64px;
 
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
@import "~element-ui/packages/theme-chalk/src/button";
@import "~element-ui/packages/theme-chalk/src/card";
@import "./components/el-card.scss"


*/deep/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

亲测有效，记录一下，经常遇到这个问题。
作用:
当你不想写全局样式,想写scoped局部样式不污染全局,又想更改子组件内的样式,此时就可以用/deep/深度作用选择器.