简介
PostCSS-Export-Custom-Variables是一款基于PostCSS实现的npm包，可以将自定义的变量导出为全局变量，以便在其他样式文件中引入使用。它提供了类似于sass中的全局变量功能，帮助开发者优化css样式，提高代码的可维护性。
安装
通过npm安装:
npm install postcss-export-custom-variables --save-dev
配置
在项目的根目录下新建postcss.config.js文件，并加入以下配置：
-- -------------------- ---- -------
-------------- - -
-------- -
---------------------------------- -
--------- ---------
------ ----------------------------------
--
-- ----
--
--其中，outputAs表示输出方式，有两种可选值：global和module。当outputAs值为global时，将自定义变量导出为全局变量；当outputAs值为module时，将自定义变量导出为es6模块。files则为自定义变量文件路径。
使用
在自定义变量文件中，申明变量时需要在前面加上$符号，例如：
$primary-color: #0078d4; $success-color: #52c41a; $error-color: #f5222d;
在其他样式文件中使用时，只需要将自定义变量文件import进来，然后用var()函数引用即可：
@import './path/to/your/custom/variables.css';
.button {
color: var(--primary-color);
background: var(--success-color);
border: 1px solid var(--error-color);
}总结
通过使用PostCSS-Export-Custom-Variables，我们可以轻松地将自定义的变量导出为全局变量或者es6模块，方便在其他样式文件中进行引用。这种方案不仅增强了css样式文件的可维护性，还可以提高开发效率和代码复用度，是一种非常实用的前端技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bb881e8991b448eb950