vue全局引入公共的scss和@mixin与@include的使用方式
作者：鸡汤辉
这篇文章主要介绍了vue全局引入公共的scss和@mixin与@include的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
如果在每一个.vue文件都引入import scss文件，后期维护起来如果修改了scss文件位置，需要一个个修改会很麻烦
如果在main.js里直接import也是行不通的，因为main.js 只能import css文件 scss文件不能直接import
那么怎么才能全局引入呢？
步骤一
下载node-sass sass-loader
npm i -D sass-loader@8.x
npm i node-sass@4.14.1
版本号要注意 之前的文章里有写因为版本号的问题会出现报错的问题，就按照这个版本号写就完事了
步骤二
配置 vue.config.js 文件
module.exports = {
configureWebpack: config => {
config.externals = {
AMap: "AMap"
},
require('@vux/loader').merge(config, {
plugins: ['vux-ui']
})
},
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
},
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.sass` 这个文件
// 注意：在 sass-loader v9 中，这个选项名是 "additionalData" v7中这个选项名是data
prependData: `@import "@/global.scss"`
}
}
},
}
注意事项：
采用这种方法的时候要注意因为它会在所有 sass 文件里添加相同的代码。
如果添加的不是变量, @mixin 之类的，而是类似下面的代码的话。
假设你有20个scss文件的话，下面这段代码就会出现在你最终打包出来的文件20次。
.box {
color: green;
}
Sass @mixin 与 @include
- @mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
- @include 指令可以将混入（mixin）引入到文档中。
一般引入的scss文件如下
@mixin center() {
display: flex;
justify-content: center;
align-items: center;
}
在各文件中使用方式：此时是不需要在js 中import 可以直接使用
div {
width: 100px;
height: 100px;
@include center;
}
经过编译后则会被翻译成
div {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。