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.js $refs和$emit 父子组件交互的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
在vue中使用export default导出的class类方式
这篇文章主要介绍了在vue中使用export default导出的class类方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue一直自动换行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue+element下日期组件momentjs转换赋值问题解决
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题，需要的朋友可以参考下2024-02-02
有很多关于vue的todolist小程序，这篇文章主要介绍了 用vue写todolist单页应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
axios中post请求json和application/x-www-form-urlencoded详解
Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用,下面这篇文章主要给大家介绍了关于axios中post请求json和application/x-www-form-urlencoded的相关资料,需要的朋友可以参考下2022-10-10
vue中的vue-router query方式和params方式详解
这篇文章主要介绍了vue中的vue-router query方式和params方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
解决element-ui el-input赋值后不能编辑的问题
这篇文章主要介绍了解决element-ui el-input赋值后不能编辑的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了详解基于vue-cli3.0如何构建功能完善的前端架子，本文整合出具备基础功能的前端架子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Vue列表循环从指定下标开始的多种方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
最新评论