本文详细介绍在 Webpack 2.0 环境下配置 postcss-loader 的两种具体方案。首先通过 npm 安装依赖,随后分别演示在 webpack.config.js 中直接配置 loader 链,以及通过 postcss.config.js 或 LoaderOptionsPlugin 插件管理 PostCSS 插件(如 autoprefixer)的方法,帮助开发者解决 CSS 前缀自动补全的配置问题。
本文旨在说明如何在 Webpack 2.0 环境中配置 postcss-loader,供读者参考。
安装 postcss-loader
首先需要执行安装命令以获取 postcss-loader 依赖。
npm install --save-dev postcss-loader
Webpack 配置方法
接下来,需要在 webpack.config.js 文件中对构建配置进行修改。
{
test:/\.css$/,
use:[
'style-loader','css-loader?importLoaders=1','postcss-loader'
]
}
使用 postcss.config.js
第一种方案是创建独立的 postcss.config.js 文件来管理配置。
module.exports = {
plugins: [
require('autoprefixer')({ /* ...options */ })
]
}
使用 LoaderOptionsPlugin
第二种方案是在 webpack.config.js 中使用 LoaderOptionsPlugin 插件进行配置。
module.exports = {
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: function(){
return [
require("autoprefixer")({
browsers: ['ie>=8','>1% in CN']
})
]
}
}
})
]
}
以上内容即为 Webpack 2.0 配置 postcss-loader 的完整介绍,希望能为学习带来帮助,欢迎继续支持。