场景:在前端工程中,我们会经常用到css预编译,有sass,less,styuls等,拿sass来说,通常我们会在项目里建一个variables.scss
文件,里面会定义一些公共的样式,可以是单纯的变量,也可以是mixin混入,类似于函数。
$activeColor: #043156;
$defaultColor: #3f3f3f;
/* flex布局 */
@mixin flex($justify:space-between, $align: center, $wrap: nowrap) {
display: flex;
justify-content: $justify;
align-items: $align;
flex-wrap: $wrap;
}
// 通用 border
@mixin border($color) {
border: 1px solid $color;
}
// 手型
@mixin cursor($pointer: pointer) {
cursor: $pointer;
}
定义好以后呢,就可以在页面中去使用了。
在vue项目中,可以在某个单文件中的style标签中引入这个scss文件。
@import 'variables.scss';
.app {
@include flex();
}
编译过后,我们在页面看到的样式就是:
.app {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
但是我们要一个个页面都去引这个scss文件就很麻烦,所以我们可以在全局去配置它,使得我们可以在配置完以后,不再去在某个单页面去引scss文件就可以直接使用咱们定义的样式变量。
// vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import @/assets/stylesheet/variables.scss;`
}
}
}
}
完成。
公众号:Coder 杂谈,欢迎关注
最后
以上就是淡然小笼包最近收集整理的关于sass 配置全局变量的全部内容,更多相关sass内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复