不知不覺地春節要來臨了，今天已經是放假的第二天，想想回老家之后所有的時間就不是自己的了，要陪孩子玩，走親戚等等，我還是趁着在鄭州的這兩天，把幾天后春節要發布的文章給提前整整。在此，提前祝大家春節快樂！！
前面我已寫了6篇相關的Webpack方面的技術知識點，今天我主要分享有關PostCSS方面的技術,PostCSS嚴格來說不是一款c s s預處理器，而是一個用 JavaScript 工具和插件轉換 CSS 代碼的工具。它的工作模式是接收樣式源代碼並交由編譯插件處理，最后輸出CSS。通過PostCSS包含的很多功能強大的插件，可以讓我們使用更新的CSS特性，保證更好的瀏覽器兼容性。
PostCSS特點
- 支持未來的css, 使用cssnext書寫未來的css
- 編譯速度有了很大的提升
- 豐富的插件系統
- c s s可以模塊化
PostCSS在Webpack中的用法
使用npm 進行安裝postcss-loader,postcss-loader是連接PostCSS和Webpack。安裝命令行如下：
npm install postcss-loader --save-dev
webpack.config.js配置如下：
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
context: path.join(__dirname, './src'),
entry: {
index: './index.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/i,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './dist'
},
}, 'css-loader'], // "css-loader" 將 CSS 轉化成 CommonJS 模塊
exclude: /node_modules/
},
{
test: /\.scss$/i,
use: ['style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
'postcss-loader' //配置postcss-loader
],
exclude: /node_modules/
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
[
'env', {
modules: false
}
]
]
}
}
}
],
},
plugins: [new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})],
}
postcss-loader可以結合css-loader使用，也可單獨使用，就是單獨使用也可以達到需要的效果，但是單獨使用的時候不建議用css中的@import語法，否則會產生冗余代碼。官方推薦是兩者結合着使用，不要單獨使用。
postcss與Autoprefixer
postCSS必須有一個單獨的配置文件，所以還需要在項目根目錄下配置一個postcss.config.js，
這個可以結合着自動添加前綴插件Autoprefixer使用，Autoprefixer 自動獲取瀏覽器的流行度和能夠支持的屬性，並根據這些數據幫你自動為 CSS 規則添加前綴。這是postCss最廣泛的一個應用場景。首先安裝Autoprefixer，安裝命令代碼如下：
npm install autoprefixer --save-dev
在postcss.config.js中添加autoprefixer,配置代碼如下：
const autoprefixer = require('autoprefixer')
module.exports = {
parser: 'sugarss',
plugins: {
'autoprefixer': {
flex: true,
browsers: [
'> 1%',
'last 3 versions',
'android 4.2',
'ie 8'
]
}
}
}
我們可以在autoprefixer中添加需要支持的特性（如grid）以及兼容哪些瀏覽器（browsers）。配置好之后，我們就可以使用一些較新的CSS特性。如：
.main{
dislay: grid;
}
由於配置中制定grid為true,也就是grid特性添加ie前綴，經過編譯后變成：
.main{
display: -ms-grid;
dislay: grid;
}
postcss 與cssnext
postcss可以與cssnext 結合使用，這樣可以在應用中使用最新的CSS的語法特性。
首頁使用npm 命令行安裝：
npm install postcss-cssnext --save-dev
然后在posts.config.js中添加相應的配置，代碼如下：
const postcssCssnext = require('postcss-cssnext')
module.exports = {
parser: 'sugarss',
plugins: {
'postcssCssnext': {
browsers: [
'> 1%',
'last 2 versions'
]
}
}
}
指定好需要支持的瀏覽器之后，我們就可以順暢地使用CSSNext的特性了。PostCSS會幫我們把CSSNext的語法翻譯為瀏覽器能接受的屬性和形式。比如下面的代碼：
/** main.css **/
:root {
--highligtColor: hwb(190, 35%, 20%);
}
body {
color: var(--highlightColor)
}
打包后編譯的效果如下：
body {
color: rgb(89, 185, 204)
}
postcss 與stylelint
stylelint是一個css代碼質量檢測的工具，我們可以為其添加各種規則，來統一項目的代碼風格，來確保代碼質量高。
首頁先用命令行安裝stylelint代碼如下：
npm install stylelint --save-dev
postcss.config.js配置代碼如下：
const stylelint = require('stylelint')
module.exports = {
plugins: {
'stylelint': {
config: {
rules: {
'declaration-no-important': true
}
}
}
}
}
這里我們添加了declaration-no-important這樣一條規則，當我們的代碼中出現了“！important”時就會給出警告。比如下面的代碼：
/** a.scss**/
$base-color: red;
html {
body{
color: $base-color !important;
}
}
打包效果如下圖：
可以看出給出警告。
使用stylelint可以檢測出代碼中的樣式問題（語法錯誤、重復的屬性等），幫助我們寫出更加安全並且風格更加一致的代碼。
CSS Modules
CSS Modules 模塊化是css的全局的終結者，就是說你永遠不用擔心命名太大眾化而造成沖突，只要用最有意義的名字就行了。
css 模塊化是近幾年比較流行的一種開發模式，讓css跟其他開發語言一樣，具有自己的模塊作用域，讓css也擁有模塊化的特點：
- 每個CSS文件中的樣式都擁有單獨的作用域，不會和外界發生命名沖突。
- 對CSS進行依賴管理，可以通過相對路徑引入CSS文件。
- 可以通過composes輕松復用其他CSS模塊。
使用CSS Modules 不需要額外安裝其他組件，只需要配置css-loader即可。
配置web pack.config.js配置如下：
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
context: path.join(__dirname, './src'),
entry: {
index: './index.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: {
localIdentName: '[path][name]__[local]--[hash:base64:5]',
}
}
}]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
[
'env', {
modules: false
}
]
]
}
}
}
],
}
}
我們只需要配置modules.localIdentName配置即可
- [name]指代的是模塊名，這里被替換為style。
- [local]指代的是原本的選擇器標識符，這里被替換為title。
- [hash：base64：5]指代的是一個5位的hash值，這個hash值是根據模塊名和標識符計算的，因此不同模塊中相同的標識符也不會造成樣式沖突。
cs s代碼如下：
/** style.css**/
.tit {
color: #ff0000;
}
// index.js
import style from './style.css';
document.write(`<p class="${style.tit}">hello webpack2</p>`);
編譯后發現代碼成了一個class為.style__tit--Vp6X7，以前我在j s中引入c s s文件，直接import引入即可，不需要定義一個名稱，但是這個c s s modules 引入c s s的時候需要定義一個對象，然后再引用，最終這個HTML中的class才能與我們編譯后的CSS類名匹配上。
運行效果如圖：
總結：
今天與大家分享的主要是postcss相關的，主要包括到postcss與webpack結合使用，autoprefixer自動添加前綴，stylelint檢測代碼，css modules等等。這只是個人觀點，如果有不足，還請多指教。如果想了解更多，請掃描下面的二維碼：
