postcss loader PostCss 插件

小夏 教育 更新 2024-02-12

本文从一段开始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.configtrue允许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 ::placeholder
W3C 制定 CSS 标准的过程复杂而漫长,官方的 W3C 标准通常要经历以下几个阶段:

工作草案(第 0 阶段):一系列草案将在公众和 W3C 成员的意见和问题的基础上提交,由工作组解决。 最终工作草案(第一阶段):工作组已经完成了工作,并要求公众和 W3C 成员提交最终意见和问题。 同样,工作组必须处理这些反馈。 如果发生这种情况,可能有必要回到工作草案阶段。 候选推荐(第 2 阶段):在解决最终工作草案阶段的所有问题后,候选推荐阶段将开始,此时规范可以被认为是稳定的并准备好进行试验实施。 工作组必须将实现的反馈整合到规范中。 同样,如果出现这种情况,有必要返回工作草案阶段。 推荐标准(第 3 阶段):进行最终审查,如果没有事故,规范将进入推荐标准阶段。 在此阶段,W3C 主管将正式要求 W3C 成员审查推荐的标准。 第 4 阶段:根据审查情况,该规范可能会成为 W3C 推荐标准,在稍作改动后返回工作草案阶段,或者完全从 W3C 计划中删除。 一旦技术规范成为推荐标准,它就会成为 W3C 的官方标准。 例如,一个::placeholder在经历上述过程的过程中,浏览器提前准备了自己的实现供开发者使用,但是他们担心最终的标准会发生变化,所以浏览器会在属性中添加一个私有前缀来支持新的属性。

但是,开发人员并不清楚哪些 CSS 属性需要在兼容模式下编写,哪些私有前缀需要应用。 此最新信息可通过 can i use** 获取,该信息可查询各浏览器和设备的支持信息以获取属性:

在日常发展中,我们通常处于:package.json#browserslist字段 (或.browserslistrcfile) 指定我们期望定位的浏览器列表,例如create react app中等:

autoprefixer插件显示package.json#browserslist配置信息,并将其与数据一起使用,以确定需要添加哪些CSS属性以及需要添加哪些与浏览器兼容的前缀。 AutoPrefixer 配置选项。 目标浏览器列表。 

建议通过package.jsonbrowserslist字段或创建.browserslistrc文件。 此配置可以在不同的前端工具之间共享,例如本文中的工具autoprefixerpostcss-preset-envpostcss-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_envnode_env变量 如果未声明查询,则选择查询(例如process.env.node_env = 'development')会先去找productionpackage.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.csssanitize.css所需的部分。 normalize.css使浏览器能够更一致地呈现所有元素并符合现代标准。 与重置 CSS 样式的方式不同,它保留了一些有用的默认样式。

@import "normalize.css";
browserslistie >= 9什么时候:

audio,video img
browserslistie >= 10什么时候:audiovideo未引入元素的样式声明:

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

相似文章