vue全局引入scss样式文件的过程记录
更新时间：2022年11月14日 15:32:56 作者：KILIG_yss
css文件可以直接引入到main.js中,scss文件如果没有scss特殊语法也可以直接引入index.js,只有scss文件中的特殊语法全局引入的时候无法显示,所以需要特殊处理,下面这篇文章主要给大家介绍了关于vue全局引入scss样式文件的相关资料,需要的朋友可以参考下
在vue中全局引入非功能性的scss样式文件很简单，只需要在main.js文件中引入对应文件就行
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 全局引入样式文件
import '@/assets/scss/index.scss'
createApp(App).use(store).use(router).mount('#app')但想要在vue中引入功能性（即定义的颜色规范、mixin样式函数等，如下）的scss的样式文件，单单在main.js中引用是无法生效的
// 颜色定义规范
$color-background: #222;
$color-background-d: rgba(0, 0, 0, 0.3);
// mixin函数
@mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: url($url + "@3x.png");
}
}想要全局引入功能性的scss样式文件，就必须在vue.config.js中写下如下代码：
module.exports = {
css: {
loaderOptions: {
sass: {
// 全局引入变量和 mixin
additionalData: `
@import "@/assets/scss/variable.scss";
@import "@/assets/scss/mixin.scss";
`
}
}
}
}与此同时要保证你的sass和sass-loader的版本较新，因为旧版本是不支持如上操作的，sass和sass-loader的版本在package.json文件中可以更改
总结
到此这篇关于vue全局引入scss样式文件的文章就介绍到这了,更多相关vue全局引入scss样式文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
elementui使用el-upload组件如何实现自定义上传
这篇文章主要介绍了elementui使用el-upload组件如何实现自定义上传，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了vue的事件绑定与方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
下面小编就为大家分享一篇使用vue + less 实现简单换肤功能的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了vue实现整屏滚动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了vue如何设置定时器和清理定时器，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue使用docx-preview实现docx文件在线预览功能全过程
文件在线预览是目前移动化办公的一种新趋势,下面这篇文章主要给大家介绍了关于vue docx-preview实现docx文件在线预览功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了Vue Validate表单组件的封装的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解下2023-09-09
Vue中使用ElementUI使用第三方图标库iconfont的示例
这篇文章主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了一些vue使用axios的小技巧,文中的示例代码讲解详细,对我们深入掌握vue有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
最新评论