javascript - 发布 CSS 不转换自定义属性

Question

我有一个使用 Webpack 的元素，它利用了 PostCSS 加载器和代码拆分。模块的 CSS 使用 SASS 加载器按照下面的方式直接导入到入口点。

import '@/css/modules/components/_accordion.scss'

一些模块使用 CSS 自定义属性，这些属性在上面导入的同一入口点的单独模块中声明。

import '@/js/modules/common'

这工作正常，但是，只有公共(public)模块中使用的自定义属性会按照 PostCSS 加载器的预期在编译的 CSS 中转换为十六进制值，而不是随后导入到入口点的每个其他 SASS 模块中使用的自定义属性，例如_accordion.scss。

作为解决方法，为了转换它们，我目前正在导入包含每个 SASS 模块顶部自定义属性的文件。

@import "css/tools/variables/colors";

然而，这意味着自定义属性声明在多个 CSS 文件( block )中重复。

我想要一个解决方案来避免在已编译的 CSS 中重复声明，同时确保所有自定义属性都按照 PostCSS 的预期进行转换。

Answer 1

您可以尝试使用 CSS 自定义属性预处理器，例如 postcss-css-variables , postcss-custom-properties或 postcss-simple-vars将您的 CSS 变量转换为静态表示。