手把手教你webpack3(11)PostCSS-Loader配置簡述
POSTCSS-LOADER配置簡述
前注:
如果可以,請給本專案加【Star】和【Fork】持續關注。
有疑義請點選這裡,發【Issues】。
DEMO地址
1、概述
postcss-loader
用於處理css程式碼,具有下列特點:
- 通常由
options
和plugins
兩部分組成,plugins
雖然巢狀在options
裡,但實際上是通過其他外掛生效的; - 配置是可以獨立的(每個配置的外掛也是獨立的)。詳細介紹閱讀【2.1】;
還有一些自定義配置,但由於篇幅所限,這裡就不像之前那樣詳解每個配置了(主要是很多都依賴於其他東西)。
只寫一些常用功能。
2、配置
2.1、獨立配置
所謂獨立配置,指的是在js檔案中,引入的css檔案如何被postcss-loader
解析,取決於和他最近的那一個postcss的設定檔案。
注:
對在css檔案中,通過@import
匯入的css檔案無效:
- 必須是通過通過
import
引入到js裡面的css檔案,才會被postcss-loader
解析生效; - 如果是
a.css
,通過@import './b.css'
引入b.css
檔案,那麼該配置對a.css
生效,對b.css
無效; - 我查了很多資料,目前沒找到能讓
postcss-loader
對在css檔案中,通過@import
方式匯入其他的css檔案,進行生效的方法。如果有,請提
優先順序:
- 在
webpack.config.js
中的module.rules
屬性裡設定的優先順序最高; - 然後按順序找,離css檔案最近的
postcss.config.js
配置檔案,遇見的第一個檔案其次; - 按順序找的後面的檔案優先順序最低;
- 找不到配置會報錯;
注(完)
先假設 webpack.config.js
裡配置方式如下(無任何特殊配置):
// ...略略略
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}
// ...略略略
簡單來說,postcss-loader
的配置檔名為:postcss.config.js
。
假設檔案樹結構如下:
.
|____app.js
|____webpack.config.js
|____index.html
|____postcss.config.js // 1#設定檔案
|____style
| |____postcss.config.js // 2#設定檔案
| |____style.css
|____style2
| |____bar.css
| |____postcss.config.js // 3#設定檔案
引用(import
)結構是:
app.js
->style/style.css
app.js
->style2/bar.css
假如兩個css檔案都有一條css屬性:box-sizing: border-box;
;
然後 style/postcss.config.js
(2#)的設定如下(相容性配置):
module.exports = {
plugins: [
require('autoprefixer')({
browsers: [
// 加這個後可以出現額外的相容性字首
"> 0.01%"
]
})
]
}
style2/postcss.config.js
(3#)的設定如下(預設配置):
module.exports = {}
經過postcss-loader
的處理之後,有相容性配置的css檔案,其插入html檔案後,css屬性變為如下:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
無相容性配置的css檔案,其插入html檔案後,css屬性變為如下:
box-sizing: border-box;
說明一點,對於postcss-loader
來說,他優先取同目錄下的postcss.config.js
的配置屬性。
另外,由於2#和3#設定檔案的存在,因此無論1#如何設定,都不會影響其效果。
假如css檔案找不到同目錄下的postcss.config.js
檔案,那麼會依次往上級目錄尋找,直到找到,或者抵達專案根目錄為止(以上面這個目錄結構為例,即webpack.config.js
所在目錄是根目錄)
2.2、自定義配置檔案路徑
名稱 | 型別 | 預設值 | 描述 |
config | {Object} | undefined | Set postcss.config.js config path && ctx |
在上面,我們寫了postcss-loader
的配置檔案的使用方式,分別是:【寫在webpack.config.js
中】,【配置檔案放在對應的css檔案的同級目錄或者上級目錄】。
但是假如我們需要統一管理 postcss-loader
的配置檔案,那麼就需要通過 config
來處理。
示例程式碼如下:
{
loader: 'postcss-loader',
options: {
config: {
path: './config' // 寫到目錄即可,檔名強制要求是postcss.config.js
}
}
}
表示會去 webpack.config.js
的同目錄下去找資料夾 config
,然後在該資料夾下找到 postcss.config.js
檔案(檔名不能改變),從而讀取配置。
假如這麼寫,會導致【放在對應的css檔案,的同級目錄或者上級目錄,的postcss-loader
的配置檔案失效】。原因是優先順序問題。
除此之外,還有一個context
設定,略略略。
2.3、sourceMap
測試後,無效(開啟與否檔案大小不變)
3、外掛
除了 autoprefixer
用於加相容性字首,其他基本都有更好的,比如stylelint
不如用eslint
系列替代。
3.1、autoprefixer
這個是最應該新增的外掛了。
效果是對css檔案新增相容性字首。
安裝:
npm install autoprefixer --save
官方github地址:
使用方式:
// postcss.config.js
let autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
autoprefixer({
browsers: [
// 加這個後可以出現額外的相容性字首
"> 0.01%"
]
})
]
}
效果:
應該是相容性最強的配置方法了,例如box-sizing
可以新增兩個字首,有些特性可以新增三個字首,如下:
轉換前
transform: rotate(0deg);
轉換後:
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
名稱 | 型別 | 預設值 | 描述 |
其他特性:
不僅可以新增字首,也可以刪除舊字首(過時字首)等。詳細檢視官方文件。
非特殊要求,直接使用上面這個配置就行了(如果不需要最多的字首,可以把上面的改為
autoprefixer({
browsers: [
// 加這個後可以出現額外的相容性字首
"> 1%"
]
})
3、參考文章
相關推薦
手把手教你webpack3(11)PostCSS-Loader配置簡述
POSTCSS-LOADER配置簡述 前注: 如果可以,請給本專案加【Star】和【Fork】持續關注。 有疑義請點選這裡,發【Issues】。 DEMO地址 1、概述 postcss-loader 用於處理css程式碼,具有下列特點: 通常
手把手教你webpack3(7)style-loader詳細使用說明
STYLE-LOADER詳細使用說明 前注: 如果可以,請給本專案加【Star】和【Fork】持續關注。 有疑義請點選這裡,發【Issues】。 DEMO地址 1、概述 簡單來說,style-loader是將css-loader打包好的css程式
手把手教你在64位Win7系統中配置Apache+Mysql+PHP環境
B/S架構當下很流行,因為B/S架構有眾多優點,例如:使用者只需有瀏覽器就可使用,維護升級都比較方便,跨平臺,等等。本文就講講Windows+Apache+PHP+Mysql的開發環境如何配置。 WAMP(Windows+Apache+PHP+Mysql)
小程序初體驗:手把手教你寫出第一個小程序(一)
輸入框 個人 創建 公測 快速 nsh 成功 too 調用 本文筆者將根據quick start中的範例代碼,帶大家簡單地剖析一下小程序的運行方式,並介紹小程序開發中一些通用的特性,帶著大家一步步寫出自己的小程序。 適用對象:前端初學者,對小程序開發感興趣者 tip
大數據江湖之即席查詢與分析(下篇)--手把手教你搭建即席查詢與分析Demo
dmi 安裝centos 用戶 author sla repo 相關 中文 plugin 上篇小弟分享了幾個“即席查詢與分析”的典型案例,引起了不少共鳴,好多小夥伴迫不及待地追問我們:說好的“手把手教你搭建即席查詢與分析Demo”啥時候能出?說到就得做到,差啥不能差
手把手教你SOAP訪問webservice並DOM解析返回的XML數據(轉)
3層 cor lock pos dom解析 tco 前言 nbsp encoding http://blog.csdn.net/u012534831/article/details/51357111 前言: 目前我們項目組還在采用webservice這種http方式,並且某
手把手教你玩轉 CSS3 3D 技術(轉載)
是不是 col 默認 占滿 概念 ebe 說明 adb relative css3的3d起步 要玩轉css3的3d,就必須了解幾個詞匯,便是透視(perspective)、旋轉(rotate)和移動(translate)。透視即是以現實的視角來看屏幕上的2D事物,從而展現3
12-少年,玩模型嗎?手把手教你statsmodels建模(3)
可見 目標 學習 函數 整體 src 一點 iam this 生活中我們總是歡迎變化的,不變是溫水,是地獄,最忌活成辦公室的家具。然而變化終究是外界的,內心的信念不變,才使人身處順境不眼暈,身處逆境如微風拂面。人的內心如孩童,總是期盼驚喜。可現實的”重錘“讓成人如被電擊的小
手把手教你Chrome瀏覽器安裝Postman(含下載雲盤鏈接)(轉)
地址欄 用戶 width 選擇 如圖所示 新版 調試 img 發送 文章轉自http://www.ljwit.com/archives/php/278.html 說明: Postman不多介紹,是一款功能強大的網頁調試與發送網頁HTTP請求的Chrome插件。本文主要介紹下
0基礎手把手教你搭建webpack運行打包項目(未完待續)
蘊含 必須 asc 工具 過程 更多 關系圖 本地服務 spa 這些天在項目之余的時間學習了webpack打包項目的東西,非常榮幸的找到一些大神的文章來學習,死勁嚼了幾天,終於略知一二。在以後的工作上還需繼續學習,下面我將分享我這幾天學到的一點東西,希望能讓我一個還不算
一站式手把手教你學習Sublime Text 3(插件安裝、html/css速寫、輸入法不跟隨光標)
Sublime Text 3 插件安裝 html/css速寫 輸入法不跟隨光標 Sublime Text 是一款流行的代碼編輯器軟件,也是HTML和散文先進的文本編輯器,可運行在Linux,Windows和Mac OS X。也是許多程序員喜歡使用的一款文本編輯器軟件。下面就重點介紹一下Subl
手把手教你開發jquery插件(一)
PE ora ID outside sep write -c visio .sh Just as the auther of jQuery Tools said: 上海代孕 http://www.xyrjkf.cn/ jQuery UI has a so-called
手把手教你部署WEB郵件系統Squirrelmail小松鼠(內附源碼包)
.gz fff usr oss 通訊 mua 文件 ins login 簡介 Web郵件系統指的是提供給用戶發信、收信的網頁操作界面,能夠完成和MUA軟件類似的郵件管理、通訊簿等附加功能,同時Web郵件系統依賴於已有的收信、發信服務器,但不需要用戶預先配置郵箱屬性,因此使用
手把手教你移植LWIP(ENC28J60)
2016年07月11日 15:00:38 hwj666 閱讀數:13160 標籤: 移植網路 更多 個人分類: 微控制器 版權宣告:本文為博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/he_wen
手把手教你使用simulink配合STM32CUBEMX (生成keil專案實戰)
本文的作者在自學過程中發現該類資料的缺少 以及前人敘述不夠完善的情況下 進行了本文的創作 文章將一步一步的講解如何使用simulink將F4的燈點亮 更多的功能我們一起探索 別的型號的 cpu 大家可以類比進行。 1.首先是將MATLAB安裝ST官方的STM32-MAT/TARGET開發庫
RS232線序問題(研旭手把手教你學DSP)
在研旭的手把手中,有一張圖很可能會給大家帶來誤導,因為沒有註明這是公頭的線序還是母頭的線序,所以很容易把RXD和TXD接反。 看下圖: 在9芯序列介面排列圖中,我們可以看到5針腳的一排 從左往右是1-5, 再看下圖,我們可以清楚的看出,左邊這個母頭是符合書
手把手教你如何基於Anaconda安裝Tensorflow(Windows和Linux兩種版本)
現在越來越多的人工智慧和機器學習以及深度學習,強化學習出現了,然後自己也對這個產生了點興趣,特別的進行了一點點學習,就通過這篇文章來簡單介紹一下,關
手把手教你破解Pycharm2018(親測適用win10)
手把手教你破解Pycharm2018(親測適用win10) 作為一名玩蛇客,少不了一個好用的IDE。而好用的IDE就像是一把利劍,劍客武功再高,狹路相逢之時也需亮出寶劍。 本人電腦安裝過PyCharm和Sublime,這次mark down一下安裝PyCharm的過程。 一.破解
手把手教你深入理解Spring原始碼-spring開篇(中)
授人以魚不如授人以漁,《手把手教你深入理解Spring原始碼》專欄教你如何學習、思考、閱讀Spring框架,並應對其它開源框架不再畏懼。 接著上篇的文章講,上篇的文章講述了什麼是IOC,這篇講述什麼又是AOP? 一樣的在看這篇文章之前,大家不妨先花點時間思考一下。 1、AOP的設計原理
【AI實戰】手把手教你訓練自己的目標檢測模型(SSD篇)
目標檢測是AI的一項重要應用,通過目標檢測模型能在影象中把人、動物、汽車、飛機等目標物體檢測出來,甚至還能將物體的輪廓描繪出來,就像下面這張圖,是不是很酷炫呢,嘿嘿 在動手訓練自己的目標檢測模型之前,建議先了解一下目標檢測模型的原理(見文章:大話目標檢測經典模型RCNN、Fast RCN