1. 程式人生 > >手把手教你webpack3(11)PostCSS-Loader配置簡述

手把手教你webpack3(11)PostCSS-Loader配置簡述

POSTCSS-LOADER配置簡述

前注:

如果可以,請給本專案加【Star】和【Fork】持續關注。

有疑義請點選這裡,發【Issues】。

DEMO地址

1、概述

postcss-loader 用於處理css程式碼,具有下列特點:

  1. 通常由 optionsplugins 兩部分組成,plugins 雖然巢狀在 options 裡,但實際上是通過其他外掛生效的;
  2. 配置是可以獨立的(每個配置的外掛也是獨立的)。詳細介紹閱讀【2.1】;

還有一些自定義配置,但由於篇幅所限,這裡就不像之前那樣詳解每個配置了(主要是很多都依賴於其他東西)。

只寫一些常用功能。

2、配置

2.1、獨立配置

所謂獨立配置,指的是在js檔案中,引入的css檔案如何被postcss-loader解析,取決於和他最近的那一個postcss的設定檔案。

注:

對在css檔案中,通過@import匯入的css檔案無效:

  1. 必須是通過通過import引入到js裡面的css檔案,才會被postcss-loader解析生效;
  2. 如果是a.css,通過@import './b.css'引入b.css檔案,那麼該配置對a.css生效,對b.css無效;
  3. 我查了很多資料,目前沒找到能讓postcss-loader對在css檔案中,通過@import方式匯入其他的css檔案,進行生效的方法。如果有,請提
    issues
    給我。

優先順序:

  1. webpack.config.js 中的module.rules屬性裡設定的優先順序最高;
  2. 然後按順序找,離css檔案最近的postcss.config.js配置檔案,遇見的第一個檔案其次;
  3. 按順序找的後面的檔案優先順序最低;
  4. 找不到配置會報錯;

注(完)

先假設 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)結構是:

  1. app.js -> style/style.css
  2. 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、參考文章

相關推薦

手把手webpack311PostCSS-Loader配置簡述

POSTCSS-LOADER配置簡述 前注: 如果可以,請給本專案加【Star】和【Fork】持續關注。 有疑義請點選這裡,發【Issues】。 DEMO地址 1、概述 postcss-loader 用於處理css程式碼,具有下列特點: 通常

手把手webpack37style-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郵件系統依賴於已有的收信、發信服務器,但不需要用戶預先配置郵箱屬性,因此使用

手把手移植LWIPENC28J60

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安裝TensorflowWindows和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