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.js和Element-UI做一个简单登录页面的实例
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
vue如何使用router.meta.keepAlive对页面进行缓存
这篇文章主要介绍了vue如何使用router.meta.keepAlive对页面进行缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最近做了一个比较老的vue项目,启动居然各种报错,下面这篇文章主要给大家介绍了关于Vue常见报错以及解决方案的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-07-07
作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-model、v-on、等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼2023-04-04
这篇文章主要介绍了vue配置请求本地json数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue 监听是否切屏和开启小窗的过程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
在Avue框架中,使用formslot自定义表格列时可能会遇到无法调用Avue的自定义校验规则的问题,这通常发生在尝试通过formslot自定义设置列的场景中,解决这一问题的一个有效方法是将自定义列与Avue的校验规则通过特定方式连接起来2024-10-10
这篇文章主要介绍了详解vue简单的store，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-10-10
Vue中的情侣属性$dispatch和$broadcast详解
这篇文章主要给大家介绍了关于Vue中情侣属性$dispatch和$broadcast的相关资料，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要为大家介绍了vue2项目增加eslint配置代码规范示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论