vue全局引入公共的scss和@mixin与@include的使用方式
更新时间：2024年02月08日 15:27:55 作者：鸡汤辉
这篇文章主要介绍了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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近公司开发一个项目,采用的前后端分离的方式,前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,下面这篇文章主要给大家介绍了关于vue ui的安装步骤以及使用的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了使用开源Cesium+Vue实现倾斜摄影三维展示,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
Vue是一款流行的JavaScript框架，它提供了数据响应式更新的能力，可以让我们轻松地更新数据，并自动更新视图，本文将介绍Vue中如何进行数据响应式更新，包括使用Vue的响应式系统、使用计算属性和使用Vue的watcher,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了pinia，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助2022-02-02
这篇文章主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue项目中axios如何捕捉http状态码为401错误问题
这篇文章主要介绍了vue项目中axios如何捕捉http状态码为401错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue中使用better-scroll实现滑动效果及注意事项
这篇文章主要介绍了vue中使用better-scroll实现滑动效果，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了从vue源码看Vue.set()和this.$set()的相关知识,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。感兴趣的朋友跟随小编一起看看吧2018-08-08
项目中的联想输入框现在都是采用的el-autocomplete实现的，但是数据增多就会需要做分页处理，本文主要介绍了vue对el-autocomplete二次封装增加下拉分页，感兴趣的可以了解一下2022-03-03
v-model可以实现数据的双向绑定,也是vue的最突出的优势,其实 v-model 实际上是一个语法糖,本文将给大家介绍一下vue中v-model的实现原理,文中有相关的代码供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-12-12
最新评论