PostCSS 入门 Sass 用户入门指南

发布于 2021-10-20 14:36:34 字数 4543 浏览 1354 评论 0

你可能已经听说过 PostCSS，它比 libsass 快了几乎两倍并且比 Ruby Sass 快了 28 倍；或者听说过它支持 cssnext 和 CSS Modules 而且可扩展功能，但你是否已经找机会尝试一下了？

PostCSS最强大之处在于它是模块化并且基于插件的架构，不过这也是个缺点。如果你之前在项目中使用 Sass，比如大多数的设计师和前端开发者，你从不需要配置任何东西——Sass内置了全部实用功能，开箱即用。然而，PostCSS需要你做一些配置。你不得不从一眼看不到底的插件列表选择插件并且自己把全部插件一起配置。

这篇教程为Sass用户提供了（我认为是）一个优秀的基本配置，让你能够容易地尝试 PostCSS 并在以后去深入细节。

注意：很多 PostCSS 项目试图通过一个单一插件为你提供类 Sass 功能。我会避免这样，当我需要指定特性时将引入独立的插件，这将给你带来更高的灵活性，而且你也可以使用一些相比 Sass 更强大的新插件。

运行 PostCSS

运行 PostCSS 的方法有很多种。你可以很容易地将它添加到Gulp或Webpack的构建过程中；但是这篇指南中，我们要让事情尽可能简单，我们将使用 PostCSS 的 CLI。大多数人需要像这样全局安装它：

npm install -g postcss-cli

然而，我推荐安装在可运行的本地环境，让他位于你当前工作的项目：

npm install --save-dev postcss-cli

并像这样运行它(位于项目根目录下):

./node_modules/.bin/postcss [options]

我发现这样比跨项目全局安装模块在版本管理上表现更好。为了变得更容易些，你可以在package.json的scripts部分加入下面几行：

{
  "name": "mysite",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node app.js",
    "postcss": "postcss --config postcss.json"
  },
  "dependencies": {
    "conveyor-belt": "0.0.5",
    "express": "~4.9.0",
    "express-handlebars": "^2.0.1",
    "morgan": "~1.3.0"
  },
  "devDependencies": {
    "postcss-cli": "^2.5.1",
  }
}

原来你可以省略./node_modules/.bin并且只需执行postcss。感谢*vectorsize的小技巧！

现在你只需执行

npm run postcss

你很可能已经注意到了--config postcss.json参数,它将包括我们的PostCSS配置。

与其在命令行给package.json文件中传入大量参数，我们可以把全部配置存在一个单一的JSON文件。下面是基本结构：

{
  "use": [],
  "input": "css/main.css",
  "output": "public/main.css",
  "local-plugins": true,
  "watch": true
}

虽然这是一个合法的例子，但它实际上什么都不能做！注意这个空的 use 数组，这是我们声明用来帮助我们转换输入的 CSS 并添加功能的 PostCSS 插件的地方。

示例 PostCSS 配置

如果你是从一个Sass项目迁移过来的，你可能想要有：

CSS @imports
CSS @extends
$variables
Nested classes
Mixins
Autoprefixing

为了获得这些功能，你需要安装相关的模块：

注意：插件提供了与 Sass 几乎相同的语法，但有一些语法略微不同（比如 postcss-mixins 更强大），所以更多信息请在上面的页面中确认。

然后用一行命令安装它们：

npm install --save-dev postcss-import postcss-simple-vars postcss-extend postcss-nested postcss-mixins autoprefixer

接着更新你的postcss.json:

{
  "use": [
    "autoprefixer",
    "postcss-import",
    "postcss-simple-vars",
    "postcss-extend",
    "postcss-nested",
    "postcss-mixins"
  ],
  "input": "css/main.css",
  "output": "public/main.css",
  "local-plugins": true,
  "watch": true,
  "autoprefixer": {
    "browsers": "> 5%"
  }
}

注意我们为 autoprefixer 添加了一个额外的键值，你也可以用 json 来配置单独的插件！

现在你只需要执行 npm run postcss（现在命令行不会有输出内容，很遗憾，你只能看到一个空行）然后它将自动转换并监听代码的变化。