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
版本號要注意 之前的文章里有寫因為版本號的問題會出現(xiàn)報錯的問題，就按照這個版本號寫就完事了
步驟二
配置 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文件的話，下面這段代碼就會出現(xiàn)在你最終打包出來的文件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;
}
經(jīng)過編譯后則會被翻譯成
div {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
使用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的開發(fā)者，我們對Vue指令一定不陌生，諸如v-model、v-on、等，同時Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時間開心的摸魚2023-04-04
這篇文章主要介紹了vue配置請求本地json數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue 監(jiān)聽是否切屏和開啟小窗的實現(xiàn)過程
這篇文章主要介紹了vue 監(jiān)聽是否切屏和開啟小窗的過程，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Avue自定義formslot調(diào)用rules自定義規(guī)則方式
在Avue框架中,使用formslot自定義表格列時可能會遇到無法調(diào)用Avue的自定義校驗規(guī)則的問題,這通常發(fā)生在嘗試通過formslot自定義設置列的場景中,解決這一問題的一個有效方法是將自定義列與Avue的校驗規(guī)則通過特定方式連接起來2024-10-10
這篇文章主要介紹了詳解vue簡單的store，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-10-10
Vue中的情侶屬性$dispatch和$broadcast詳解
這篇文章主要給大家介紹了關于Vue中情侶屬性$dispatch和$broadcast的相關資料，文中通過示例代碼以及圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
這篇文章主要為大家介紹了vue2項目增加eslint配置代碼規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08