什么是 PostCSS?如何使用插件自动化 CSS 任务 | 您所在的位置:网站首页 › crowcorceous是什么 › 什么是 PostCSS?如何使用插件自动化 CSS 任务 |
「这是我参与2022首次更文挑战的第10天,活动详情查看:2022首次更文挑战」。 什么是 PostCSS?PostCSS 是一种 JavaScript 工具,可将你的 CSS 代码转换为抽象语法树 (AST),然后提供 API(应用程序编程接口)用于使用 JavaScript 插件对其进行分析和修改。 PostCSS 提供了一个庞大的插件生态系统来执行不同的功能,如 linting、缩小、插入供应商前缀和许多其他事情。 它既不是后处理器也不是预处理器,它只是一个将特殊的PostCSS插件语法转换为 Vanilla CSS 的转译器。你可以将其视为 CSS 的Babel工具。 你可以将 PostCSS 与现有的预处理器(如 Sass、Less 和 Stylus)结合使用。或者你可以将其用作所有这些的替代品,因为它具有单独使用所需的所有功能。 你可能已经在不知不觉中使用过 PostCSS。它用于流行的 Autoprefixer 插件,该插件用于自动将供应商前缀添加到需要它们的 CSS 属性中。 PostCSS 也被其他技术使用,如 Vite 和 Next.js,以及 CSS 框架TailwindCSS,它是一个 PostCSS 插件。 PostCSS 的特点和优势 PostCSS 是完全可定制的,因此你只能使用应用程序所需的插件和功能。 与其他预处理器相比,它还产生更快的构建时间。
PostCSS 是关于插件的(就其本身而言,它只是一个 API)。它有一个由 356 个插件组成的生态系统(在撰写本文时)。每个插件都是为特定任务创建的。 你可以使用PostCSS GitHub 官方页面上的插件目录或使用PostCSS 插件的可搜索目录浏览插件。 在开始编写代码之前,我强烈建议莫按照以下步骤操作: 将以下postcss-tutorial 存储库下载或 fork 到你的计算机并尝试跟随。(确保阅读 README.md 文件。) 如果你使用 Visual Studio 代码编辑器,请安装PostCSS 语言支持 插件,以便您的编辑器可以识别任何新语法并停止给您错误(如果您使用其他代码编辑器,请跳过此步骤)。******** 流行的 PostCSS 插件 PostCSS 导入使用的基本和最重要的插件之一是postcss-import。它允许我们将 CSS 文件导入其他文件。 要检查如何使用此插件,请访问src/style.csspostcss-tutorial 存储库。 @import './components/comp1.css'; @import './components/comp2.css';可以看到,它与我们在 Sass 中使用 @import 方法的方式非常相似。 **注意: **与原生 CSS 中的导入规则postcss-import不同您应该避免原生 CSS 中的导入规则,因为它可以防止样式表被同时下载,从而影响加载速度和性能。 浏览器必须等待每个导入的文件被加载,而不是一次加载所有的 CSS 文件。 自动前缀这是最流行的 PostCSS 插件之一。您可以使用Can I Use网站中的值来解析和添加供应商前缀(如-webkit、-moz和)并将其添加-ms到 CSS 规则中。 我们使用 Can I Use 网站查看哪些浏览器的版本支持 CSS 功能。这有助于我们确定是否需要添加前缀。 Autoprefixer 使用Browserslist,因此你可以通过查询指定要在项目中定位的浏览器。 我们可以使用“browserslist”键在 package.json 文件中配置我们的 Browserslist: "browserslist": [ "defaults" ]上面的defaults查询是以下内容的简短版本: > 0.5%全球使用率至少为 0.5% 的浏览器。 last 2 versions每个浏览器的最后 2 个版本, Firefox ESR最新的Firefox 扩展支持版本., not dead在过去 24 个月内获得官方支持或更新的浏览器。或者我们可以使用.browserslistrc根目录中的文件,并在其中输入我们的配置。 defaults为了测试这个插件,我们在文件中添加了一些需要前缀的 CSS 规则src/components/comp2.css: label { user-select: none; } ::selection { color: white; background: blue; } ::placeholder { color: gray; }根据我们之前的“浏览器列表”设置,最终输出将是: label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ::-moz-selection { color: white; background: blue; } ::selection { color: white; background: blue; } ::-moz-placeholder { color: gray; } :-ms-input-placeholder { color: gray; } ::placeholder { color: gray; } PostCSS 预设环境这个插件使我们能够在我们的代码中使用现代 CSS(如嵌套和自定义媒体查询),方法是将其转换为浏览器可以理解的 Vanilla CSS。 它有一个stage选项,可以根据在实现为 Web 标准的过程中的稳定性来确定要填充哪些 CSS 功能。 stage可以是 0(实验性)到 4(稳定),也可以是 false 。第 2 阶段是默认设置。 对于嵌套,我们需要使用阶段 1。 module.exports = { plugins: [ require('postcss-preset-env')({ stage: 1 }) ], }此外,preset-env 插件默认包含Autoprefixer插件,并且该browsers选项将自动传递给它。 在src/components/comp1.css我们使用的嵌套特性与我们在 Sass 预处理器中使用的非常相似: article { background: purple; & .title { font-size: 6rem; } & li { list-style-type: none; } }由于现在的 CSS 不支持嵌套,所以我们需要对上面的代码进行转换,以便 Web 浏览器能够理解它。 以下代码是最终结果: article { background: purple } article .title { font-size: 6rem; } article li { list-style-type: none; } PostCSS 嵌套如果我们只想使用嵌套功能,那么这个插件是完美的选择,因为它产生与前一个插件相同的结果。 PostCSS 混合Mixin 允许您定义可以在整个代码中重复使用的样式。 在我们的代码中,我们在src/components/comp1.css文件中使用了一些 mixin。 我们首先使用关键字@defin-mixin后跟 mixin 名称来定义 mixin。@mixin然后我们通过在关键字后面写名字来使用它。 @define-mixin reset-list { margin: 0; padding: 0; list-style: none; } nav ul { @mixin reset-list; }现在的 CSS 不支持 Mixin,因此需要将它们编译为 Vanilla CSS。 最终代码将是: nav ul { margin: 0; padding: 0; list-style: none; } 样式线这是一个 CSS linter,它可以帮助我们避免代码中的错误,以免它们破坏我们的用户界面 (UI)。 它可以通过多种方式进行配置。其中之一通过使用如下stylelint属性:package.json "stylelint": { "rules": { "color-no-invalid-hex": true } }在里面stylelint我们有多个选项可以配置。在这里,我们将仅介绍“规则”选项,该选项可让您定义 linter 应查找的规则,并在不遵循这些规则时给出错误。 如果为给定的"color-no-invalid-hex": trueCSS 属性提供了无效的十六进制值作为颜色,则规则会在终端中给出错误。 Styleint linter 在第 11 行作为颜色提供的无效十六进制值给出错误。 注意: 默认情况下不启用任何规则,也没有默认值。您必须明确配置每个规则以将其打开。 Cssnano这是一个缩小器,用于尽可能减少最终的 CSS 文件大小,以便您的代码为生产环境做好准备。 某些部分将被更改以尽可能减小大小,例如删除不必要的空格、新行、重命名值和变量、合并在一起的选择器等等。 所以这是我们在缩小过程之前的最终 CSS 代码: * { padding: 0; margin: 0; } article { background: purple } article .title { font-size: 6rem; } article li { list-style-type: none; } nav ul { margin: 0; padding: 0; list-style: none; } body { font-family: sans-serif, Calibri; font-size: 16px; } label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ::-moz-selection { color: white; background: blue; } ::selection { color: white; background: blue; } ::-moz-placeholder { color: gray; } :-ms-input-placeholder { color: gray; } ::placeholder { color: gray; }在缩小过程之后,我们准备好用于生产环境的最终 CSS 代码将是这样的: *{margin:0;padding:0}article{background:purple}article .title{font-size:6rem}article li{list-style-type:none}nav ul{list-style:none;margin:0;padding:0}body{font-family:sans-serif,Calibri;font-size:16px}label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-moz-selection{background:blue;color:#fff}::selection{background:blue;color:#fff}::-moz-placeholder{color:gray}:-ms-input-placeholder{color:gray}::placeholder{color:gray} PostCSS 标准化这个插件允许你使用流行的库normalize.css或sanitize.css的某些部分。 这些 CSS 库提供一致的、跨浏览器的 HTML 元素默认样式,还纠正了错误和常见的浏览器不一致。 这个插件依赖于你提供的值来显示 HTML 元素的正确样式。这是一个例子。"browserslist" 如何设置 PostCSS要开始使用 PostCSS,我们首先需要使用以下命令全局安装它及其命令行界面(CLI): npm i -g postcss-cli -g全球下载。然后使用以下命令在本地安装 PostCSS: npm i -D postcss -D``--save-dev将已安装的包保存为开发依赖项的缩写。要开始使用 PostCSS,我们需要至少下载一个插件。 如果您正在使用postcss-tutorial 存储库,您可以简单地运行npm install以下载所有包和依赖项。 使用 PostCSS CLI 设置 PostCSS需要在终端中运行的命令的一般语法是: postcss [input.css] [OPTIONS] [-o|--output output.css] [--watch|-w] postcss [OPTIONS] --dir [--watch|-w]我们可以直接在终端中运行以下命令: postcss src/style.css --use postcss-import --dir public --watch该--use选项列出了我们正在使用的插件。 该--watch选项监视文件的任何更改并重新编译它们。 通过 package.json 文件中的 NPM 脚本设置 PostCSS在“脚本”的 package.json 文件中,我们需要输入以下内容: "postcss:watch": "postcss src/style.css --use postcss-import --dir public --watch"上面的命令将创建一个名为“public”的新目录,其中包含我们最终的 Vanilla CSS 文件,该文件与源文件 (style.css) 同名。 如果我们希望输出文件的名称与源文件名不同,我们需要替换--dir public为-o public/. 比如: -o public/main.css. 我们可以使用不同的选项配置我们的命令在 PostCSS CLI 中运行以获得我们想要的结果。 现在要运行上面的命令,我们输入npm run 终端。(我们是postcss:watch,你可以选择任何你想要的名字)。 随着我们的项目变得越来越大,我们更有可能添加更多插件。对于每个使用的插件,我们需要在上面命令中的关键字后面写下它的名称--use,这使得它非常长并且不是一个好习惯。 另一种解决方案是创建一个 postcss.config.js 文件。 通过设置 PostCSS 配置文件来设置 PostCSS在项目的根目录中,创建一个文件并将其命名为postcss.config.js。 里面的代码如下所示: module.exports = { plugins: [ require('postcss-import'), require('postcss-mixins'), require("stylelint"), require('postcss-preset-env')({ stage: 1 }), require('cssnano'), ], }在 plugins 数组中,我们添加了我们的插件。 注意: 在我们的列表顶部添加 postcss-import 插件非常重要,因为它是文档所必需的。 在我们的 package.json 文件中运行 PostCSS 的命令需要更改为: "postcss:watch": "postcss src/style.css --dir public --watch"如您所见,唯一需要更改的是删除该--use选项,因为我们提到的插件列表现在是一个单独的文件。 使用任务运行器(或模块捆绑器)设置 PostCSSPostCSS 可以设置为与Gulp、Grunt等各种任务运行器以及Rollup和Webpack等模块捆绑器一起使用。 在本节中,我们将看到如何为 PostCSS 设置 Grunt。 首先,我们需要在本地将 grunt 安装到“dev”依赖项中: npm i -D grunt然后全局安装 grunt-cli: npm install -g grunt-cli现在我们需要在项目的根目录中创建一个文件并将其命名为Gruntfile.js。 然后我们需要安装一个特定的插件@lodder/grunt-postcss让我们通过以下命令使用 Grunt 运行 PostCSS: npm i -D @lodder/grunt-postcss在initCnfig函数内部,我们设置了 PostCSS 配置。 module.exports = function(grunt) { grunt.initConfig({ postcss: { options: { processors: [ require('postcss-import')(), require('postcss-mixins'), require("stylelint"), require('postcss-preset-env')({ stage: 1 }), require('cssnano')(), ] }, dist: { src: 'src/style.css', dest: 'public/style.css' } } }) grunt.loadNpmTasks('@lodder/grunt-postcss'); }在这里,我们将坚持运行 PostCSS 的基本最低要求,即: 在processors数组中调用我们的插件。 在对象中设置源文件和目标文件dist。如需更多配置,您可以随时查看@lodder/grunt-postcss的官方文档。 要完成我们的配置,我们需要使用该grunt.loadNpmTasks方法加载我们的插件。 最后为了运行我们的 Grunt 任务,我们输入: grunt postcss 结论PostCSS 自 2015 年以来一直存在,它在 CSS 预处理器中非常流行。 你可以将其用作独立工具或与其他现有预处理器结合使用。 何时使用它以及如何(独立或结合使用)取决于你的项目需求。 |
CopyRight 2018-2019 实验室设备网 版权所有 |