前言:webpack 處理css是一個很基礎的話題。只是在webpack4 裡,用autoprefixer解決css 的瀏覽器的兼容性時,會有個和以前不一樣的坑。所以就再詳細的寫一下這方面的知識。
一,所需依賴
- style-loader:將css 檔案注入到html 頁面的style 標籤中。參考:https://www.webpackjs.com/loa...
- css-loader:解析import 到js 裡的css 檔案。參考: https://www.webpackjs.com/loa...
- less-loader:解析css 預處理語言,若使用的是其它的預處理語言,就要使用與其對應的loader。參考: https://www.html.cn/doc/webpa...
-
postcss-loader:對我們在專案中寫完的css 進行後期處理:
- 把CSS 解析成JavaScript 可以操作的抽象語法樹結構(Abstract Syntax Tree,AST),
- 呼叫外掛程式來處理AST 並且得到結果。
- autoprefixer:postcss-loader的插件,為css 加前綴,以適應不同瀏覽器。
註:postcss-loader的作用就像影視後期一樣,把所有的原始檔案合在一起,然後用外掛加上特效,最後輸出成品。 autoprefixer 外掛程式就將postcss-loader 解析出的AST 進行後處理。
二,安裝依賴
npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer
登入後複製
三,建立less 測試檔style.less
#world{ display: flex; }
登入後複製
四,在主檔index.js 中匯入style.less
import './style.less';
登入後複製
五,webpack設定檔webpack.config.js
module: { rules: [ { test: /\.less$/, use: [ 'style-loader', {loader: 'css-loader', options: { importLoaders: 1 } }, 'less-loader', 'postcss-loader' ] }, ] }
登入後複製
css-loader的importLoaders: 1,是一個很重要的設定。這會讓所有解析完成的css 只注入到一個style 標籤裡。若無此配置,每個新的css 檔案在註入時,都會建立一個新的style 標籤,有的瀏覽器裡對style 標籤是有數量限制的。
六,建立postcss 設定檔 postcss.config.js,在其中引入autoprefixer 外掛程式
module.exports = { plugins: [ require('autoprefixer') ] }
登入後複製
七,在package.json 中加入瀏覽器清單browserslist。這就是前言裡說的坑,沒有的話autoprefixer 就不起作用
{ "scripts": { "build": "webpack", "dev": "webpack-dev-server --mode development" }, "browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ] }
登入後複製
八,運行命令
npm run build
登入後複製
九,css解析成功,效果如下:
#world { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
登入後複製