在vue-cli中應(yīng)用scss/less全局變量

Alex 發(fā)布于2019-08-23 16:20 / 2655人閱讀

摘要：首先需要安裝插件修改的，找到的加載設(shè)置修改為，這里的路徑即是我們定義全局變量的地方修改的，找到的加載設(shè)置這里的路徑即是我們定義全局變量的地方替換成上面自定義的函數(shù)更多詳細(xì)知識(shí)介紹請(qǐng)?jiān)L問我的個(gè)人主頁

首先需要安裝插件：sass-resources-loader

npm i sass-resources-loader --save-dev

scss: 修改vue-cli的build/utils.js，找到scss的加載設(shè)置：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders("less"),
    sass: generateLoaders("sass", { indentedSyntax: true }),
    scss: generateLoaders("sass"),
    stylus: generateLoaders("stylus"),
    styl: generateLoaders("stylus")
  }

修改為：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders("less"),
    sass: generateLoaders("sass", { indentedSyntax: true }),
    scss: generateLoaders("sass").concat({
      loader:"sass-resources-loader",
      options:{
        resources:path.resolve(__dirname,"./../src/assets/scss/base.scss")，// 這里的路徑即是我們定義全局變量的地方
      }
    }),
    stylus: generateLoaders("stylus"),
    styl: generateLoaders("stylus")
  }

less: 修改vue-cli的build/utils.js，找到less的加載設(shè)置：

function lessResourceLoader() {
        var loaders = [
            cssLoader,
            "less-loader",
            {
                loader: "sass-resources-loader",
                options: {
                    resources: [
                        path.resolve(__dirname, "../src/assets/styles/common.less"),// 這里的路徑即是我們定義全局變量的地方
                    ]
                }
                        }
        ];
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: "vue-style-loader"
            })
        } else {
            return ["vue-style-loader"].concat(loaders)
        }
    }
    
    less: generateLoaders("less") 替換成上面自定義的函數(shù) less: lessResourceLoader()

更多詳細(xì)知識(shí)介紹請(qǐng)?jiān)L問我的個(gè)人主頁

GPU云服務(wù)器云服務(wù)器在c語言中全局變量在js中怎么打印變量全局變量在深度學(xué)習(xí)中的應(yīng)用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102928.html

相關(guān)文章

vue-cli安裝和vs code 的相關(guān)配置

摘要：在本文之前，先給大家講一下接下來需要安裝的東西和他們之間的聯(lián)系。的安裝一安裝的官網(wǎng)下載的安裝包。在或中執(zhí)行命令。以上，就是和的安裝與配置在本文之前，先給大家講一下接下來需要安裝的東西和他們之間的聯(lián)系。 node: node是js服務(wù)執(zhí)行的環(huán)境，通常我們使用node實(shí)現(xiàn)前端的工程化。前端工程化有很多工具可以實(shí)現(xiàn)，比如webpack、glup等，他們都是基礎(chǔ)node進(jìn)行開發(fā)的。 w...

Loong_T 2019-08-23 14:46 評(píng)論0 收藏0
webpack開發(fā)與生產(chǎn)環(huán)境配置

摘要：豹哥對(duì)于剛開始小白的自己雖然現(xiàn)在也白知無不談，而且回復(fù)超快超認(rèn)真。這里真的很感謝豹哥。是項(xiàng)目啟動(dòng)時(shí)的一些文件，如的配置文件開發(fā)環(huán)境服務(wù)配置文件一些簡(jiǎn)單工具函數(shù)等等。是關(guān)于整個(gè)項(xiàng)目的環(huán)境配置包括開發(fā)與生產(chǎn)。前言作者去年就開始使用webpack, 最早的接觸就來自于vue-cli。那個(gè)時(shí)候工作重點(diǎn)主要也是 vue 的使用，對(duì)webpack的配置是知之甚少，期間有問題也是詢問大牛 @呂大...

afishhhhh 2019-08-20 18:32 評(píng)論0 收藏0
關(guān)于sass、scss、less的概念性知識(shí)匯總

摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，預(yù)處理器有沒有解決更大的麻煩。也是成熟的預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。這篇文章主要解答以下幾個(gè)問題，供前端開發(fā)者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預(yù)處理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 評(píng)論0 收藏0
關(guān)于sass、scss、less的概念性知識(shí)匯總

摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，預(yù)處理器有沒有解決更大的麻煩。也是成熟的預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。這篇文章主要解答以下幾個(gè)問題，供前端開發(fā)者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預(yù)處理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 評(píng)論0 收藏0
在原生CSS中使用變量

摘要：而現(xiàn)在，我們可以在原生中使用變量了先來兩個(gè)在線感受一下定義變量，也稱為自定義屬性。但是局部變量只能夠在被申明的元素及其子元素中使用。在中使用變量變量是的一部分，這意味著我們可以通過來訪問修改變量的值，這是等預(yù)處理器所做不到的。本文首發(fā)于我的博客一直以來，CSS作為一種申明式的樣式標(biāo)記語言，很難像如javascript等命令式編程語言一樣通過定義和使用變量的方式來維護(hù)和追蹤某些狀態(tài)。...

FreeZinG 2019-08-30 14:03 評(píng)論0 收藏0