Webpack實戰（七）：簡單搞懂PostCSS的用法及與一些插件的用法-有解無憂

不知不覺地春節要來臨了，今天已經是放假的第二天，想想回老家之后所有的時間就不是自己的了，要陪孩子玩，走親戚等等，我還是趁著在鄭州的這兩天，把幾天后春節要發布的文章給提前整整，在此，提前祝大家春節快樂！！

前面我已寫了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 >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等等，這只是個人觀點，如果有不足，還請多指教，如果想了解更多，請掃描下面的二維碼：
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147698.html

標籤：JavaScript

上一篇：js是什么？js可以做什么？js的構成與學習方向

下一篇：什么是匿名函式？