本文从一段开始postcss-loader
配置 Expand Chat PostCSS 及其相关插件。 是的git clone
源代码查看示例效果。
, postcss 选项 postcssoptions: , 支持阶段 3 功能阶段: 3, }规范化是根据目标浏览器列表设置引入的CSS 中所需的部分是 postcssnormalize(), require('postcss-normalize')。PostCSS 是一个允许你使用 JS 插件转换样式的工具,它获取一个 CSS 文件并将其解析成一个抽象语法树(AST tree),并提供一系列 API 供插件用来分析和修改 CSS 规则,例如自动添加兼容 CSS 的前缀。
使用 postcss 是一系列插件的组合,这些插件在 webpack 中传递postcss-loader
使用插件,而 postcss 本身可以使用配置文件设置插件选项(推荐postcss.config.js
// postcss.config.jsmodule.exports = ],将参数传递给插件'postcss-preset-env', ]
postcss-loader
可以设置在postcssoptions.config
为true
允许postcss-loader
使用配置文件中的选项,配置文件中的选项将与加载器选项合并,加载器选项具有更高的优先级,但不建议同时使用配置文件和加载器选项。
// webpack.config.jsmodule.exports = ,此插件修复了与 flex 布局相关的 flexbugs 中列出的一些错误。 例如,bug 81.答:IE 10-11 将被忽略
flex
缩写calc()
函数(固定在边缘),例如flex: 0 0 calc(100%/3)
它在 IE 中不起作用。
经线postcss-flexbugs-fixes
处理后,它变为:
.foo自动添加与浏览器兼容的前缀(例如
-webkit-
(chrome,safari)、-moz-
(firefox)、-ms-
(ie)、-o-
(opera))。例如,以下 **:
::placeholder经线
postcss-flexbugs-fixes
处理后,它变为:
::-moz-placeholder :-ms-input-placeholder ::placeholderW3C 制定 CSS 标准的过程复杂而漫长,官方的 W3C 标准通常要经历以下几个阶段:
工作草案(第 0 阶段):一系列草案将在公众和 W3C 成员的意见和问题的基础上提交,由工作组解决。 最终工作草案(第一阶段):工作组已经完成了工作,并要求公众和 W3C 成员提交最终意见和问题。 同样,工作组必须处理这些反馈。 如果发生这种情况,可能有必要回到工作草案阶段。 候选推荐(第 2 阶段):在解决最终工作草案阶段的所有问题后,候选推荐阶段将开始,此时规范可以被认为是稳定的并准备好进行试验实施。 工作组必须将实现的反馈整合到规范中。 同样,如果出现这种情况,有必要返回工作草案阶段。 推荐标准(第 3 阶段):进行最终审查,如果没有事故,规范将进入推荐标准阶段。 在此阶段,W3C 主管将正式要求 W3C 成员审查推荐的标准。 第 4 阶段:根据审查情况,该规范可能会成为 W3C 推荐标准,在稍作改动后返回工作草案阶段,或者完全从 W3C 计划中删除。 一旦技术规范成为推荐标准,它就会成为 W3C 的官方标准。 例如,一个::placeholder
在经历上述过程的过程中,浏览器提前准备了自己的实现供开发者使用,但是他们担心最终的标准会发生变化,所以浏览器会在属性中添加一个私有前缀来支持新的属性。
但是,开发人员并不清楚哪些 CSS 属性需要在兼容模式下编写,哪些私有前缀需要应用。 此最新信息可通过 can i use** 获取,该信息可查询各浏览器和设备的支持信息以获取属性:
在日常发展中,我们通常处于:package.json#browserslist
字段 (或.browserslistrc
file) 指定我们期望定位的浏览器列表,例如create react app
中等:
autoprefixer
插件显示package.json#browserslist
配置信息,并将其与数据一起使用,以确定需要添加哪些CSS属性以及需要添加哪些与浏览器兼容的前缀。 AutoPrefixer 配置选项。 目标浏览器列表。
建议通过package.json
browserslist
字段或创建.browserslistrc
文件。 此配置可以在不同的前端工具之间共享,例如本文中的工具autoprefixer
postcss-preset-env
postcss-normalize
可以使用package.json
或.browserslistrc
在文件中配置目标浏览器列表。
如果未设置browserslist
使用默认浏览器配置defaults
> 0.5%, last 2 versions, firefox esr, not dead
,这意味着:
: 大于 05%。
last 2 versions
:每个浏览器的最后 2 个版本。 firefox esr
:Firefox扩展支持的最新版本。 not dead
:排除 24 个月未获得官方支持或更新的浏览器,更多配置选项可以在这里找到。 package.json#browserslist
跟.browserslistrc
配置方法:
package.json
.browserslistrc
文件配置:
defaultsnot ie 11maintained node versions
针对不同的环境进行配置,browserslist 将基于browserslist_env
或node_env
变量 如果未声明查询,则选择查询(例如process.env.node_env = 'development'
)会先去找production
package.json
相应.browserslistrc
文件配置:
[production]>0.2%not deadie 10[development]last 1 chrome versionlast 1 firefox versionlast 1 safari version
postcss-preset-env
允许您使用将来的(尚未推荐的)CSS 功能,该插件将根据您的目标浏览器或运行时环境添加所需的 polyfills。
在没有任何配置选项的情况下,postcss preset env 默认处于启用状态stage 2
阶段 CSS 功能和对所有浏览器的支持。
常用选项:
stage
:此选项启用指定阶段的 CSS 属性并填充 polyfill。 features
:此选项通过 [id] 启用或禁用特定的 polyfills、可选 ID 列表、任何未显式启用或禁用的 polyfillsfeatures
这一切都是这样stage
选项确定。 browsers
:根据您需要支持的目标浏览器确定需要哪些 polyfill。 但通常建议在通常package.json#browserslist
字段 (或.browserslistrc
文件)。如果指定了无效的 browserslist 配置,则默认的 browserslist 将用于查询 (> 0.5%, last 2 versions, firefox esr, not dead
postcss-loader[ require('postcss-preset-env'),指定插件选项,浏览器:'last 2 versions',所有浏览器的最后 2 个版本 },
postcss-preset-env
包括autoprefixer
的插件,通过autoprefixer
指定的选项autoprefixer
插件的配置项。
[ require('postcss-preset-env'),
postcss-normalize
它可以使用browserslist
(目标浏览器列表)设置介绍normalize.css
或sanitize.css
所需的部分。 normalize.css
使浏览器能够更一致地呈现所有元素并符合现代标准。 与重置 CSS 样式的方式不同,它保留了一些有用的默认样式。
@import "normalize.css";
browserslist
为ie >= 9
什么时候:
audio,video img
browserslist
为ie >= 10
什么时候:audio
跟video
未引入元素的样式声明:
img配置选项:该插件将 CSS 提取到一个单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并支持按需加载 CSS 和 SourceMaps,需要在 Webpack 4 中使用。
const minicssextractplugin = require("mini-css-extract-plugin");module.exports = , plugins: [new minicssextractplugin()]有关更详细的用法,请参阅此处。 postcss-loader configpostcsspostcss flexbugs fixespostcss preset envbrowserslistminicssextractplug