PostCSS和autoprefixing (postcss-loader)

PostCSS是一个CSS后处理工具,它可以改变你的CSS很多很酷的方式,像什么autoprefixing,产品毛羽和更多!

首次启用它webpack.config.js:

1 2 3 4 5 6

/ / webpack.config.js安可/ /……+ .enablePostCssLoader ();

然后重启安可。当您这样做时,它会给你一个命令您可以运行安装任何缺少的依赖关系。运行这个命令后,重新再来一次,你已经完成了!

接下来,下载任何你想要的插件,如autoprefixer:

1 2 3 4 5

#如果你用纱包管理器美元纱添加autoprefixer - dev#如果你使用npm包管理器美元npm安装autoprefixer——save-dev

接下来,创建一个postcss.config.js项目文件的根源:

1 2 3 4 5 6 7 8 9

模块. export = {插件:{/ /包含任何你想要的插件/ /但是确保你安装这些通过纱或npm !/ /添加browserslist配置方案。json(见下文)autoprefixer:{}}}

就是这样!的postcss-loader现在将用于所有CSS, Sass等文件。你也可以通过选项来的postcss-loader通过传递一个回调:

1 2 3 4 5 6 7 8 9 10 11 12

/ / webpack.config.js+ const path =要求(“路径”);安可/ /……+ .enablePostCssLoader((选项)= > {+选项。postcssOptions = {+ / / postcss.config的目录。js文件存储+配置:路径。解决(__dirname ' sub-dir ', ' custom.config.js '),+};+});

1 2 3 4 5

{+“browserslist”:(+“违约”+)}

1 2 3 4 5 6 7 8

{+“browserslist”:(“+”> 0.5%,”+“最后2版本,+“火狐ESR”,+“没死”+)}