vue全局引入scss（mixin）_好用的混合(mixins).scss公共样式

前言

today，is good day，中午吃了个农民工外卖，有点撑，想在床上躺会，TMD，睁开眼天黑了，别说，冬天的上海天黑的挺早，基本上五点半就已经全黑了，住在出租屋的我，却感觉不到上海的灯火通明，繁华，毕竟在我们这些人的眼里，上海是有钱人的上海，它的繁华、它的璀璨与我无关，我只不过是外地过来讨饭的！回归正题吧！我们在写VUE的时候，会使用scss，也会做一些通用样式，方便使用，在写好的通用样式的时候，每次都要单文件导入，刚开始写的时候，感觉还好，后面工程量大了后，就显得麻烦，那么本文就全局导入scss样式！

mixin.scss

// 颜色定义规范
$color-background : #FFFFFF;
$color-background-d : rgba(0, 0, 0, 0.3);
$color-highlight-background : #333;
$color-dialog-background : #666;
$color-theme : #ffcd32;
$color-theme-d : rgba(255, 205, 49, 0.5);
$color-sub-theme : #d93f30;
$color-text-d : rgba(255, 255, 255, 0.3);
$color-text-l : rgba(255, 255, 255, 0.5);
$color-text-ll : rgba(255, 255, 255, 0.8);

$font-gray : #999;

//字体定义规范
$font-size-small-s : 10px;
$font-size-small : 12px;
$font-size-medium : 14px;
$font-size-medium-x : 16px;
$font-size-large : 18px;
$font-size-large-x : 22px;

$font-weight : 600;





body,html{
  //background: rgb(239, 242, 249);
}

//背景图片 100%
@mixin bkgMaxSize($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@mixin font-setting-group($font-size,$font-family,$font-weight,$color,$line-height){
  font-size: $font-size;
  font-family: $font-family;
  font-weight: $font-weight;
  color: $color;
  line-height: $line-height;
}

//边框圆角
@mixin borderRadius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

//定位上下左右居中
@mixin positionCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//定位上下居中
@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

//定位左右居中
@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

//定位全屏
@mixin allcover {
  position: absolute;
  top: 0;
  right: 0;
}

//相对定位
@mixin my-absolute($left, $top,$z) {
  position: absolute;
  z-index: $z;
  margin-left: $left;
  margin-top: $top;
}

//宽高-不同
@mixin widthHeightN($width, $height){
  width: $width;
  height: $height;
}
//宽高-相同
@mixin widthHeightY($number){
  width: $number;
  height: $number;
}

//字体大小，颜色
@mixin sizeColor($size, $color){
  font-size: $size;
  color: $color;
}


//flex布局
@mixin center_none{
  display: flex;
  justify-content: center;
  align-items: center;
}


@mixin center_center{
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-start_center{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@mixin space-between_center{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@mixin space-around_center{
  display: flex;
  justify-content: space-around;
  align-items: center;
}



@mixin flex-end_center{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@mixin wrap_flex-start{
  display: flex;
  flex-wrap:wrap;
  align-content:flex-start;
}


@mixin flex-start_column{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
@mixin none_center_column{
  display: flex;
  align-items: center;
  flex-direction: column;
}

@mixin center_center_column{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}


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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

这个文件就是全局封装好的scss

单文件使用

全局挂载

导入依赖

npm install sass-resources-loader
1

添加配置
vue.config.js文件中添加如下代码

module.exports = {
  outputDir: 'mbb',/*输出目录*/
  publicPath: '/',/*访问前缀*/
  lintOnSave: false,//关闭Eslint检测

  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
          .use('sass-resources-loader')
          .loader('sass-resources-loader')
          .options({
            // Provide path to the file with resources
            // 要公用的scss的路径
            resources: 'src/assets/stylus/mixin.scss'
          })
          .end()
    })
  }
  
}

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

chainWebpack块中的

重启项目


搞定