快捷導(dǎo)航

vue全局引入公共的scss和@mixin與@include的使用方式

更新時(shí)間：2024年02月08日 15:27:55 作者：雞湯輝

這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

步驟一

下載node-sass sass-loader

npm i -D sass-loader@8.x

npm i node-sass@4.14.1

版本號(hào)要注意之前的文章里有寫(xiě)因?yàn)榘姹咎?hào)的問(wèn)題會(huì)出現(xiàn)報(bào)錯(cuò)的問(wèn)題，就按照這個(gè)版本號(hào)寫(xiě)就完事了

步驟二

配置 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)文章

使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue如何使用router.meta.keepAlive對(duì)頁(yè)面進(jìn)行緩存
這篇文章主要介紹了vue如何使用router.meta.keepAlive對(duì)頁(yè)面進(jìn)行緩存問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue常見(jiàn)報(bào)錯(cuò)以及解決方案實(shí)例總結(jié)
最近做了一個(gè)比較老的vue項(xiàng)目,啟動(dòng)居然各種報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于Vue常見(jiàn)報(bào)錯(cuò)以及解決方案的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue自定義指令的使用實(shí)例介紹
作為使用Vue的開(kāi)發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、等，同時(shí)Vue也為開(kāi)發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫(xiě)代碼的效率，讓我們可以節(jié)省時(shí)間開(kāi)心的摸魚(yú)
2023-04-04
vue配置請(qǐng)求本地json數(shù)據(jù)的方法
這篇文章主要介紹了vue配置請(qǐng)求本地json數(shù)據(jù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
vue 監(jiān)聽(tīng)是否切屏和開(kāi)啟小窗的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了vue 監(jiān)聽(tīng)是否切屏和開(kāi)啟小窗的過(guò)程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
Avue自定義formslot調(diào)用rules自定義規(guī)則方式
在Avue框架中,使用formslot自定義表格列時(shí)可能會(huì)遇到無(wú)法調(diào)用Avue的自定義校驗(yàn)規(guī)則的問(wèn)題,這通常發(fā)生在嘗試通過(guò)formslot自定義設(shè)置列的場(chǎng)景中,解決這一問(wèn)題的一個(gè)有效方法是將自定義列與Avue的校驗(yàn)規(guī)則通過(guò)特定方式連接起來(lái)
2024-10-10
vue簡(jiǎn)單的store詳解
這篇文章主要介紹了詳解vue簡(jiǎn)單的store，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-10-10
Vue中的情侶屬性$dispatch和$broadcast詳解
這篇文章主要給大家介紹了關(guān)于Vue中情侶屬性$dispatch和$broadcast的相關(guān)資料，文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue2項(xiàng)目增加eslint配置代碼規(guī)范示例
這篇文章主要為大家介紹了vue2項(xiàng)目增加eslint配置代碼規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08