webpack項目輕鬆混用css module

来源:https://www.cnblogs.com/walls/archive/2018/06/08/9153555.html
-Advertisement-
Play Games

解決antd-mobile和css module衝突,css module的使用方式 ...


前言

本文講述css-loader開啟css模塊功能之後,如何與引用的npm包中樣式文件不產生衝突。
比如antd-mobilenpm包的引入。在不做特殊處理的前提下,樣式文件將會被轉譯成css module

一、產生問題的原因

{ 
    test: /\.css$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[hash:base64:6]'
            }
        },
        'postcss-loader'
    ] 
}

以上代碼片段,摘自webpack配置的module.rule
可以看出wepack在編譯過程中,遇到.css結尾的文件,都會交由postcss-loadercss-loaderstyle-loader依次處理。
因為css-loader開啟了css模塊功能,所以,所有經過處理的css文件,類名都將被改變。

二、初步改進

使用excludeinclude進行區分

1.node_module文件夾內的文件,避免被當前rule處理

{ 
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        }{
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[hash:base64:6]'
            }
        },
        {
            loader: 'postcss-loader'
        }
    ],
    exclude:[path.resolve(__dirname, '..', 'node_modules')]
}

如上所示,將node_module文件夾內的文件,用exclude排除在外,不用當前rule進行處理。

2.單獨處理node_module內的css文件

{ 
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader'
        }
    ],
    include:[path.resolve(__dirname, '..', 'node_modules')]
}

三、升級版,支持css module模式和普通模式混用

1.用文件名區分兩種模式

  • *.global.css 普通模式
  • *.css css module模式

這裡統一用 global 關鍵詞進行識別。

2.用正則表達式匹配文件

// css module
{ 
    test: new RegExp(`^(?!.*\\.global).*\\.css`),
    use: [
        {
            loader: 'style-loader'
        }{
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[hash:base64:6]'
            }
        },
        {
            loader: 'postcss-loader'
        }
    ],
    exclude:[path.resolve(__dirname, '..', 'node_modules')]
}

// 普通模式
{ 
    test: new RegExp(`^(.*\\.global).*\\.css`),
    use: [
        {
            loader: 'style-loader'
        }{
            loader: 'css-loader',
        },
        {
            loader: 'postcss-loader'
        }
    ],
    exclude:[path.resolve(__dirname, '..', 'node_modules')]
}

四、其他問題

less在使用css module時,對url的解析存在衝突,可以用resolve-url-loader進行解決,直接上代碼:


test: /\.less/,
use: [
    {
        loader: "style-loader"
    },
    {
        loader: "css-loader", 
        options: {
            sourceMap: true,
            importLoaders: 2
        }
    },
    {
        loader: "postcss-loader", 
        options: {
            sourceMap: true
        }
    },
    {
        loader: "resolve-url-loader", 
        options: {
            sourceMap: true
        }
    },
    {
        loader: "less-loader", 
        options: {
            sourceMap: true
        }
    }
]

參考

[1] [Updated README regarding relative filepaths issue #121](https://github.com/webpack-contrib/less-loader/pull/121)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iPhone上面的應用一直都是以流暢的操作體驗而著稱,但是由於之前開發人員把註意力更多的放在開發功能上面,比較少去考慮性能的問題,可能這其中涉及到objective-c,c++跟lua,優化起來相對複雜一些,導致應用在比如touch等較低端的產品上,光從啟動到進入頁面就花了將近一分鐘的時間,頁面之間 ...
  • 項目中包含多個工程 合併出現編譯錯誤問題 背景:當一個大型項目中包含2個以上的子項目時。比如,主項目中有master分支(發佈產品的分支)和dev分支(自己開發的分支)。同時在子項目中也有2個分支,分別是:sun_master(發佈分支)和sun_dev(自己開發的分支)。 產生錯誤:當開發時,把m ...
  • 一、首先獲取圖片 //第一種獲取圖片的方法 //第二種獲取圖片的方法 二、保存圖片 源碼下載地址:https://download.csdn.net/download/daxudada/10272805 喜歡我的就關註我 ...
  • 按照故事板的用語,應用中的一個界面屏幕被稱作一個”場景(Scene)",以後添加額外的場景時,停靠區中將有另一個部分。 一,新建立一個工程,如圖所示。 二,選中Main.storyboard.如圖所示。 三,在storyboard場景上拖入一個button,並命名為"firstButton". 四, ...
  • 網頁的固定格式 編寫網頁和寫信一樣都有一套規範和要求,這套規範和要求中規定了寫信的固定格式 寫信基本結構 親愛的xx: 你好! 我。。。。。。。。。。。。。。。。。。 。。。。。。 此致 敬禮! xxx 2018年x月x日 編寫網頁的步驟: 一定不用用中文命名文件,要用英文或者拼音 基本結構 ... ...
  • 簡介 在codepen上看到一個Canvas做的下雨效果動畫,感覺蠻有意思的。就研究了下,這裡來分享下,實現技巧。效果可以見下麵的鏈接。 霓虹雨: http://codepen.io/natewiley/full/NNgqVJ/ 效果截圖: Canvas動畫基礎 大家都知道,Canvas其實只是一個 ...
  • 這個圖片里的時間不用都記住,只需要記住一些特殊的,1993年,1995年(在W3C接手以後,才有了真正意義上的標準),1999年這幾個時間 WHATWG的目的是推廣HTML的標準,HTML5是瀏覽器廠商搞得 IETF簡介:IETF是英文Internet Engineering Task Force ...
  • 昨天練習寫了這個小demo,個人覺得通過設置定位元素left和top的值,來實現換行的功能,這種方法很巧妙~ 另外,如下代碼中的隨機顏色的獲取,還請各位前輩多多指教:需要改進的地方;或者有沒有更好的方法。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...