在前端开发过程中，我们经常需要处理 CSS 文件。其中，自定义属性是一种非常有用的技术，可以让我们更方便地管理和复用样式。而 postcss-custom-properties 就是一个优秀的 NPM 包，能够帮助我们实现自定义属性的使用。
什么是 postcss-custom-properties？
postcss-custom-properties 是一个 PostCSS 插件，它使我们可以在 CSS 中使用自定义属性。这些属性类似于变量，允许我们将样式值分配给一个变量，并随后在 CSS 中引用该变量。
例如，我们可以使用以下代码定义一个自定义属性：
:root { --main-color: #ff0000; }
然后在其他 CSS 规则中使用该属性：
a { color: var(--main-color); }
当浏览器解析 CSS 文件时，postcss-custom-properties 将会把这些自定义属性转换成标准的 CSS 属性。
安装 postcss-custom-properties
要使用 postcss-custom-properties，首先需要安装它。可以通过 NPM 来安装：
npm install postcss postcss-custom-properties --save-dev
这个命令将会在你的项目中安装 postcss 和 postcss-custom-properties 这两个包。
配置 postcss-custom-properties
接下来，我们需要配置 postcss-custom-properties 插件。为了使用它，我们需要创建一个 postcss.config.js 文件，内容如下：
-- -------------------- ---- ------- -------------- - - -------- - -------------------------------------- --------- ------ ----------- ------------------------ --- -- --- ---- -- --展开代码
其中，preserve 表示是否保留原来的自定义属性。如果设置为 true，则原始自定义属性将保留在 CSS 中。如果设置为 false（默认值），则在转换过程中会将它们替换为标准的 CSS 属性。
importFrom 表示从哪里导入自定义属性。可以是一个文件路径、一个 URL，也可以是一个包含自定义属性的对象。
使用 postcss-custom-properties
现在，我们已经完成了 postcss-custom-properties 的安装和配置。接下来，我们就可以在项目中使用这个插件了。
首先，我们需要创建一个包含自定义属性的 CSS 文件，例如 variables.css：
:root { --main-color: #ff0000; }
然后，在其他 CSS 文件中使用这些变量：
a { color: var(--main-color); }
当你编译这些 CSS 文件时，postcss-custom-properties 将会自动将这些自定义属性转换成标准的 CSS 属性。这样，浏览器就能够正确地解析这些样式了。
示例代码
以下是一个完整的代码示例，演示如何使用 postcss-custom-properties：
首先，安装依赖：
npm install postcss postcss-cli postcss-custom-properties --save-dev
然后，创建一个包含自定义属性的 CSS 文件 variables.css：
:root { --main-color: #ff0000; }
最后，编写一个需要使用这些自定义属性的 CSS 文件 main.css：
a { color: var(--main-color); }
为了将这些 CSS 文件编译成标准的 CSS 文件，我们可以在 package.json 文件中添加一个 "build" 脚本，如下所示：
-- -------------------- ---- ------- - ------- ------------- ---------- - -------- -------- ------------ -- -------------- -- ------------------ - ---------- ---------- -------------- --------- ---------------------------- --------- - -展开代码
现在，运行以下命令即可编译 CSS 文件：
npm run build > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/43388) ，转载请注明来源 [https://www.javascriptcn.com/post/43388](https://www.javascriptcn.com/post/43388)
