在vue-cli中應用scss/less全局變量

Alex 發布于2019-08-23 16:20 / 2621人閱讀

摘要：首先需要安裝插件修改的，找到的加載設置修改為，這里的路徑即是我們定義全局變量的地方修改的，找到的加載設置這里的路徑即是我們定義全局變量的地方替換成上面自定義的函數更多詳細知識介紹請訪問我的個人主頁

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

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

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

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的加載設置：

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") 替換成上面自定義的函數 less: lessResourceLoader()

更多詳細知識介紹請訪問我的個人主頁

GPU云服務器云服務器在c語言中全局變量在js中怎么打印變量全局變量在深度學習中的應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102928.html

vue-cli安裝和vs code 的相關配置

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

Loong_T 2019-08-23 14:46 評論0 收藏0
webpack開發與生產環境配置

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

afishhhhh 2019-08-20 18:32 評論0 收藏0
關于sass、scss、less的概念性知識匯總

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

HmyBmny 2019-08-29 16:24 評論0 收藏0
關于sass、scss、less的概念性知識匯總

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

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

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

FreeZinG 2019-08-30 14:03 評論0 收藏0