很 可 惜 的 是 , 这 些 模 块 不 能 进 一 步 地 分 拆 和 精 简 了 。 例 如 说

_variables.scss 这 个 文 件 , 其 实 它 为 大 量 我 用 不 到 的 模 块 提 供 了 常
量 定 义 , 但 就 算 我 用 不 制 这 些 常 量 我 也 无 法 把 它 们 剔 除 。 只 要 我 用 到 的
模 块 依 赖 于 其 中 某 些 常 量 , 我 就 必 须 把 所 有 的 常 量 带 上 。 因 此 , 尽 管 精
简 后 CSS 体 积 减 半 , 但 仍 然 有 大 量 不 需 要 用 到 的 CSS 被 打 包 进 去 了 。

配 置 Autoprefixer

尽 管 Harp 能 够 编 译 Bootstrap 的 SCSS 文 件 , 但 还 有 一 件 事 情 是
Bootstrap 官 方 编 译 做 了 但 Harp 不 会 做 的 , 那 就 是 Autoprefixer, 这 个
工 具 会 为 CSS 规 则 加 上 浏 览 器 厂 商 前 缀 , 保 证 CSS 的 兼 容 性 。 0
说 , 如 果 我 们 手 写 了 user-select: none, Autoprefixer 会 自 动 添 加 -

。 f 化 仁
webkit-user-select: none、-moz-user-select: none 二 奂 。

Autoprefixer 自 己 不 能 直 接 在 命 令 行 里 使 用 , 必 须 通 过 PostCSS 调 用 。
也 就 是 说 , 调 用 postCSS 处 理 CSS 文 件 , 然 后 指 定 使 用 Autoprefixer
插 件 。 为 此 我 们 需 要 安 装 PostCSS 和 Autoprefixer, 这 强 迫 我 把 我 的 项
目 变 为 一 个 NPM 模 块 , 这 样 我 才 有 package.json 文 件 , 然 后 才 能 安
装 我 所 需 的 NPM 模 块 。

需 要 注 意 的 是 ,Autoprefixer 必 须 在 Harp 编 译 之 后 调 用 。Harp 编 译 先
把 SCSS 编 译 为 CSS, 然 后 再 把 输 出 的 CSS 交 给 Autoprefixer 处 理 一
遍 。Harp 把 项 目 目 录 里 面 的 pablic/ 编 译 后 输 出 到 www/, 然 后 我 让
仪 Pretrer 细 译 www/oaa/ 并 原 地 覆 盖 就 好 了 。 最 后 我 写 出 来 的 编 译
命 令 如 下 :

harPp compilLe 。
npx Postcss www/css/* .css –use autoprefixer -d www/css/

配 置 Netlify 执 行 上 述 命 令 进 行 编 译 , 我 们 的 工 作 也 就 完 成 了 。 如 果 你
对 这 类 技 术 文 章 感 兴 趣 , 欢 迎 通 过 邮 件 或 RSS/Atom 订 阅 我 的 博 客 。

Backlinks