webpack4 css添加瀏覽器前綴 postcss-loader
阿新 • • 發佈:2018-07-20
tcs pre plugin ctp fig css 打包 插入 mil
自動添加瀏覽器前綴 ,我們這裏使用postcss-loader
首先 cnpm install --save-dev postcss-loader autoprefixer
我這裏用的cnpm ,npm也可以下載
接下來是配置
在網上查了相關文檔發現需要新建一個 postcss.config.js 文件來對 postcss-loader 配置。
第一種配置: 新建與 webpack.config.js 同級的 postcss.config.js 文件
module.exports = { plugins:[ require("autoprefixer") ]}
然後打包出的css文件就自動 添加前綴了
body div { display: flex; -webkit-transform: all 1s;/*這裏添加了 -webkit-*/ transform: all 1s; }
然而我發現 現在把 配置移到options裏,也可以 產生同樣的效果。
第二種配置 在 webpack.config.js 的 module.rules 的 postcss-loader options 裏添加。
{ test: /\.(le|c)ss$/, include: [ path.resolve(__dirname, "app") ], exclude: [ path.resolve(__dirname, "node_modules") ], use: [ { loader: MiniCssExtractPlugin.loader}, /** * style-loader 主要 將css 插入到head 的style 標簽中內聯 */ // {loader:"style-loader"}, /** * */ { loader: "css-loader" }, { loader: "less-loader" },{ loader: "postcss-loader", options: { plugins: [ require("autoprefixer") /*在這裏添加*/ ] } } ] }
同樣可以自動添加 瀏覽器前綴。
這兩種方法比較來說,肯定是第二種比較好,可以省去創建一個文件的麻煩,直接在同一個文件中配置就好了。
不過這個loader 我發現只能添加 -webkit- 前綴,其他幾種前綴目前還沒有發現。
webpack4 css添加瀏覽器前綴 postcss-loader