vue全局引入公共的scss和@mixin與@include的使用方式
如果在每一個(gè).vue文件都引入import scss文件，后期維護(hù)起來(lái)如果修改了scss文件位置，需要一個(gè)個(gè)修改會(huì)很麻煩
如果在main.js里直接import也是行不通的，因?yàn)閙ain.js 只能import css文件 scss文件不能直接import
那么怎么才能全局引入呢？
步驟一
下載node-sass sass-loader
npm i -D sass-loader@8.x
npm i node-sass@4.14.1
版本號(hào)要注意 之前的文章里有寫因?yàn)榘姹咎?hào)的問(wèn)題會(huì)出現(xiàn)報(bào)錯(cuò)的問(wèn)題，就按照這個(gè)版本號(hào)寫就完事了
步驟二
配置 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/ 的別名
// 所以這里假設(shè)你有 `src/variables.sass` 這個(gè)文件
// 注意：在 sass-loader v9 中，這個(gè)選項(xiàng)名是 "additionalData" v7中這個(gè)選項(xiàng)名是data
prependData: `@import "@/global.scss"`
}
}
},
}
注意事項(xiàng)：
采用這種方法的時(shí)候要注意因?yàn)樗鼤?huì)在所有 sass 文件里添加相同的代碼。
如果添加的不是變量, @mixin 之類的，而是類似下面的代碼的話。
假設(shè)你有20個(gè)scss文件的話，下面這段代碼就會(huì)出現(xiàn)在你最終打包出來(lái)的文件20次。
.box {
color: green;
}
Sass @mixin 與 @include
- @mixin 指令允許我們定義一個(gè)可以在整個(gè)樣式表中重復(fù)使用的樣式。
- @include 指令可以將混入（mixin）引入到文檔中。
一般引入的scss文件如下
@mixin center() {
display: flex;
justify-content: center;
align-items: center;
}
在各文件中使用方式：此時(shí)是不需要在js 中import 可以直接使用
div {
width: 100px;
height: 100px;
@include center;
}
經(jīng)過(guò)編譯后則會(huì)被翻譯成
div {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近公司開(kāi)發(fā)一個(gè)項(xiàng)目,采用的前后端分離的方式,前端采用vue,但是再項(xiàng)目開(kāi)發(fā)過(guò)程中遇到一個(gè)比較麻煩的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue?ui的安裝步驟以及使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
使用開(kāi)源Cesium+Vue實(shí)現(xiàn)傾斜攝影三維展示功能
這篇文章主要介紹了使用開(kāi)源Cesium+Vue實(shí)現(xiàn)傾斜攝影三維展示,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新
Vue是一款流行的JavaScript框架，它提供了數(shù)據(jù)響應(yīng)式更新的能力，可以讓我們輕松地更新數(shù)據(jù)，并自動(dòng)更新視圖，本文將介紹Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新，包括使用Vue的響應(yīng)式系統(tǒng)、使用計(jì)算屬性和使用Vue的watcher,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了pinia，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了vue解決彈出蒙層滑動(dòng)穿透問(wèn)題的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果及注意事項(xiàng)
這篇文章主要介紹了vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了從vue源碼看Vue.set()和this.$set()的相關(guān)知識(shí),我們先來(lái)從Vue提供的Vue.set()和this.$set()這兩個(gè)api看看它內(nèi)部是怎么實(shí)現(xiàn)的。感興趣的朋友跟隨小編一起看看吧2018-08-08
vue對(duì)el-autocomplete二次封裝增加下拉分頁(yè)
項(xiàng)目中的聯(lián)想輸入框現(xiàn)在都是采用的el-autocomplete實(shí)現(xiàn)的，但是數(shù)據(jù)增多就會(huì)需要做分頁(yè)處理，本文主要介紹了vue對(duì)el-autocomplete二次封裝增加下拉分頁(yè)，感興趣的可以了解一下2022-03-03
v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,也是vue的最突出的優(yōu)勢(shì),其實(shí) v-model 實(shí)際上是一個(gè)語(yǔ)法糖,本文將給大家介紹一下vue中v-model的實(shí)現(xiàn)原理,文中有相關(guān)的代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12