vue全局引入scss样式文件的过程记录
作者：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样式文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！