PostCSS和自动重固定(PostCSS -loader)

PostCSS是一个CSS后期处理工具，可以转换你的CSS在很多很酷的方式，比如autoprefixing，产品毛羽和更多!

首先在webpack.config.js：

1 2 3 4 5 6

// webpack.config.js Encore //…+ .enablePostCssLoader ();

然后重新启动Encore。当你这样做时，它会给你一个命令，你可以运行它来安装任何缺失的依赖项。运行该命令并重新启动Encore之后，您就完成了!

接下来，下载任何你想要的插件，比如autoprefixer：

1 2 3 4 5

#如果你使用Yarn包管理器＄纱线添加自动修复器—dev#如果你使用NPM包管理器＄NPM安装autoprefixer

接下来，创建一个postcss.config.js在你的项目的根文件:

1 2 3 4 5 6 7 8 9

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

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

12 3 4 5 6 7 8 9 10 11 12

/ / webpack.config.js+ const path = require('path');Encore //…+ .enablePostCssLoader((options) => {+选项。postcsssoptions = {+ // postcss.config.js文件所在的目录+ config:路径。解析(__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”，+“没死”+)｝