CSS-LOADER配置詳解

時間  2019-11-16
標籤 css loader 配置 詳解 欄目 CSS 简体版
原文   原文鏈接

CSS-LOADER配置詳解

前注：

文檔全文請查看 根目錄的文檔說明。css

若是能夠，請給本項目加【Star】和【Fork】持續關注。html

有疑義請點擊這裏，發【Issues】。vue

一、概述

對於通常的css文件，咱們須要動用三個loader（是否是以爲好麻煩）；webpack

一、css-loader：git

先附上官網文檔（中文）的連接：css-loader文檔。github

不過說實話，這個官方文檔講的很糟糕，看的人一臉懵逼。web

css-loader主要用於處理圖片路徑（其實也包括例如導入css文件的路徑），而且會將css樣式打包進js文件中（以模塊的形式打包導入）；bash

但問題在於，他不會將這些代碼插入html中，所以還須要經過例如style-loader來實現將打包好的css代碼插入html文件中。服務器

二、style-loader：app

一樣先附上官網文檔（中文）的連接：style-loader文檔

基本用法：

用於將 css-loader 打包好的css模塊，插入到html文件中，變成一個 <style>標籤；

三、file-loader：

file-loader文檔

基本用法：

用於處理各類資源文件，通常是圖片，否則圖片是沒辦法被同時打包的。

二、css-loader配置詳解

先吐槽一波，中文文檔裏的說明，真的是描述的一點都不清楚。

2.一、root

名稱 類型 默認值 描述
root {String} / 解析 URL 的路徑，以 / 開頭的 URL 不會被轉譯

官方文檔裏對這個解釋不夠嚴謹。

首先，假如不設置設個屬性，若是理解爲，以 / 開頭的url不會被轉譯，從結果來看，也不算錯；

然而，假如設置這個屬性的話，那麼就不同了。

在面對圖片路徑時，這個屬性有三種狀況：

  1. 當不設置這個屬性的時候，css-loader不會去解析以/開頭的圖片路徑，也不會報錯；
  2. 當設置這個屬性的時候，即便你設置其值爲默認值 /，css-loader也會去嘗試解析這個路徑，若是找不到對應的圖片，會報錯；
  3. 當設置這個屬性的值爲非默認值，和【2】中的行爲是同樣的，css-loader去嘗試解析這個路徑，若是找到圖片，則正常解析，找不到，會報錯；

當設置這個屬性時，是指，當url以 ``/``爲開頭時，到底去找哪裏的文件夾做爲解析以 ``/``爲開頭的url路徑的文件；

當面對css文件路徑時，即在css文件裏，經過 @import 引入css文件時，這個是不對css文件的路徑生效的（即便找不到，也不會報錯）。

示例：

文件樹：

根目錄
|-- src
| |-- app.js
| |-- src
|   |-- logo.png
|
|-- static
| |-- abc.png
|
|-- webpack.config.js
複製代碼

那麼在 webpack.config.js 裏配置的時候，應該這麼寫：root: __dirname + '/static/'。

__dirname 表示根目錄的絕對路徑。假如根目錄的路徑是 D:/abc/def，那麼 __dirname 就表示 D:/abc/def ，而 __dirname + '/static/ 則表示 D:/abc/def/static

這就是告訴 css-loader ，碰見 / 開頭的url路徑，你應該去 D:/abc/def/static 這個路徑下去找文件。

2.二、

名稱 類型 默認值 描述
url {Boolean} true 啓用/禁用 url() 處理

首先，咱們已知，css-loader 正常會解析css屬性裏的圖片url路徑，例如 background: url('/logo.png') 裏面的值。

那麼，假如某圖片不在你的工程裏，而是在服務器上。

而你是能夠預知打包後的html文件和這個圖片的相對路徑關係，你就能夠直接寫那個時候的路徑，並將url設置爲false。

可是，若是設置爲false，那麼全部url都不會進行轉義了（也不會觸發file-loader），天然也不會報錯（即便圖片不存在）。

示例：

假如打包後，上傳到服務器的目錄爲：

dist
|-- app.js
|-- logo.png
複製代碼

那麼你若是想引用 logo.png ，那麼把 url 設置爲 false 以後，而後路徑這麼寫就好了 background: url('./logo.png')。

2.三、alias

名稱 類型 默認值 描述
alias {Object} {} 建立別名更容易導入一些模塊

說實話我本身搗鼓了半天也沒完全搞明白其原理，可是琢磨出來一些用法：

一、對圖片路徑生效

假如文件結構：

根目錄
|--static
|  |-- logo.png
|-- webpack.config.js
複製代碼

解釋：

  1. 已知： 圖片放在 /static 目錄下；
  2. 已知：不確認css文件放在哪裏（由於模塊化，方便移動，因此可能更改模塊的目錄結構）；
  3. 需求：我想要確保個人css文件必然能引用到這個圖片，即便更改模塊的文件路徑，也不影響（不須要我二次去修改）；
  4. 行動：那麼添加 css-loader 的屬性，設置以下：alias: {'@': __dirname + '/static/'} ;
  5. 行動：在css文件裏，圖片以下引用 background: url(~@/logo.png)；
  6. 結果：我就能夠確保必然css文件必然能引用到這個圖片了；
  7. 注意： @ 前要加 ~ 讓 webpack 識別（~ 是 webpack 負責識別，認爲是根目錄，而 @ 是 css-loader 負責）；

二、對 @import 引入的css文件無效；

假如文件結構：

根目錄
|--static
|  |-- style.css
|  |-- foo.css
|-- webpack.config.js
複製代碼

解釋：

  1. 文件目錄結構如上；
  2. 在 style.css 若是經過 @import '~@/foo.css' 來導入；
  3. 即便在 webpack.config.js 裏這麼設置 alias: {'@': __dirname + '/src/style/'} 也是沒有用的；

三、解決場景：

這個能夠應用的場景挺多，不過如今不少是經過webpack的別名通用配置來解決

  1. css文件和圖片文件分離；
  2. 也能夠分類擺放圖片（例如@開頭的是風景類圖片，peopel開頭的是人物圖片）；
  3. 記得在別名以前加一個波浪線~讓webpack識別，不然沒法正常工做；

2.四、import

名稱 類型 默認值 描述
import {Boolean} true 啓用/禁用 @import 處理
  1. 假如你經過@import導入的是某個打包後工程所在位置的css文件；
  2. 即該文件不在打包前的工程裏（例如CDN）；
  3. 那麼這個就有用；
  4. 表現效果@import導進來的css沒有被打包，只是單純的引入了（該@import代碼被直接放在style標籤裏）；
  5. 你能夠查看dist/index.html的style標籤來深入瞭解；

這裏給一個簡單的示例：

webpack打包前：

// foo.css
@import 'http://abc.com/m.css'
複製代碼

webpack打包後：

// html文件（假設使用了style-loader把css經過style標籤插入）
<style>
@import 'http://abc.com/m.css'
</style>
複製代碼

2.五、minimize

名稱 類型 默認值 描述
minimize {Boolean|Object} false 啓用/禁用 壓縮
  1. 這個很好理解，本來寫css文件的時候，咱們各類換行空格，這個改成true以後，換行和空格就去掉了；

  2. 通常開發的時候，取環境變量，當環境變量爲生產環境的時候，設置爲true；開發環境的時候，設置爲false；

  3. 關於生產環境的配置，能夠查看參考示例，搜索 minimize 便可；

壓縮前代碼：

* {
    margin: 0;
    border: 0;
    padding: 0;
}

.box {
    border-radius: 150px;
}
複製代碼

壓縮後代碼：

*{margin:0;border:0;padding:0}.box{border-radius:150px}
複製代碼

2.六、sourceMap

名稱 類型 默認值 描述
sourceMap {Boolean} false 啓用/禁用 Sourcemap

  1. 在 minimize 設置爲 true 後，css代碼被壓縮了，那麼若是咱們要調試的話就很麻煩；
  2. 當 sourceMap 設置爲 true 後，經過Chrome控制檯的 Sources 標籤，在左邊欄上面選 Sources ，能夠在樹結構的 (no domain) 裏，查看到壓縮後和壓縮前的CSS代碼；
  3. 即便 minimize 沒有設置爲 true （不壓縮），因爲css代碼被扔到了js裏，所以也是沒法直接查看咱們寫的css代碼的；
  4. 可是 sourceMap 設置爲true後，就能夠經過【2】中描述的途徑來查看咱們寫的css代碼；

啓用 sourceMap 壓縮前的代碼：

https://github.com/qq20004604/webpack-study/blob/master/5%E3%80%81Loader/css_loader/01.png

啓用 sourceMap 壓縮後的代碼：

https://github.com/qq20004604/webpack-study/blob/master/5%E3%80%81Loader/css_loader/02.png

2.七、importLoaders

名稱 類型 默認值 描述
importLoaders {Number} {Number} 在 css-loader 前應用的 loader 的數量

說實話，加不加這個，感受沒啥區別（我還專門研究了一波postcss和autoprefixer讓他生效。

見我關於postcss的配置，爲了正常運行，我在項目裏webpack把這個註釋掉了，能夠取消掉註釋 // importLoaders: 0 // 感受沒什麼用

若是有看法，歡迎指正

2.八、modules等

名稱 類型 默認值 描述 說明
modules {Boolean} false 啓用/禁用 CSS 模塊 一、初步理解：這個至關於把css視爲模塊。例如我有一個css文件 foo.css ，而後裏面有一個類 .bar，我能夠在js文件裏經過 import foo from './foo.css'導入這個css文件；

二、在打包後，foo.css裏的類 .bar 會變成具備惟一性的一個字符串（舉個例子假設他變成了abcdefg）；

三、假如我在html裏使用的是class='bar'，那麼顯然是沒法正常生效的（bar被轉爲了abcdefg）；

四、那麼我可使用變量foo.bar（在js這裏，這是一個變量），賦給本來使用class='bar'的這個DOM節點；

五、因爲是變量，因此他的值事實上已經被css-loader轉爲了abcdefg，能夠正常運行了；

六、推薦阮一峯的博客CSS Modules 用法教程
camelCase {Boolean|String} false 以駝峯化式命名導出類名 一、這個須要結合modules來看，在modules設置爲true時，咱們能夠經過變量名來獲取改名後的css類名；

二、但咱們寫css類名的時候，通常是例如foo-bar這種寫法，在js裏顯然不合適；

三、所以把這個啓用爲true，咱們就可使用fooBar這種駝峯式寫法了，方便js引用；
localIdentName {String} [hash:base64] 配置生成的標識符(ident) 一、這個也是跟modules相關的，用於對本來混算複雜不具備可讀性的類名，進行重命名；

二、我以爲這個文章講這個比較好，你真的知道 css-loader 怎麼用嗎？，搜索關鍵詞：localIdentName

這三個是一塊兒使用的的，見表格內容吧。

三、項目地址

github.com/qq20004604/… ，請 Star 和 fork 到本地後，注意相關配置。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程