谁能解释一下如何使用 postcss-preset-env 的 importFrom？

Question

我正在尝试使用 Webpack+PostCSS。这是 CSS 配置：

const cssRule = {
    test: /\.css$/,
    use: [
        'style-loader',
        {loader: 'css-loader'},
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    postcssImport({
                        paths: ['./assets']
                    }),
                    postcssPresetEnv({
                        stage: 0,
                        browsers: 'Firefox ESR',
                        importFrom: ['./assets/shared/colors.css']
                    }),
                    postcssEasingGradients()
                ]
            }
        }
    ]
}

assets/shared/colors.css 文件如下所示：

:root {
    --color-primary-0: #051845;
    --color-primary-1: #05112B;
    --color-primary-2: #041335;
    --color-primary-3: #092568;
    --color-primary-4: #0A328D;

    --color-primary-3-a20: #09256820;

    --color-secondary-1-0: #200446;
    --color-secondary-1-1: #16052C;
    --color-secondary-1-2: #190336;
    --color-secondary-1-3: #310769;
    --color-secondary-1-4: #42098F;

    --color-secondary-2-0: #004628;
    --color-secondary-2-1: #012C1A;
    --color-secondary-2-2: #00361F;
    --color-secondary-2-3: #006A3D;
    --color-secondary-2-4: #009153;

    --light-gray: #EEE;
    --dark-gray: #333;
}

但是当我尝试使用这种颜色时，Firefox devtools 抱怨变量未设置，实际颜色无处可见。

我做错了什么？

---

P。 S. 我也尝试了与 Webpack css-loader 的导入类似的设置，结果完全相同...

Answer 1

更新

考虑一下我后来更简单、更新的答案：https://stackoverflow.com/a/67610503/11817077

答案

我做错了什么？

可能没有一个答案。试试这些。

A.你不是exporting the variables。我建议尝试导入你要使用的变量，然后导出变量。 “为什么要出口已经要进口的东西？！”我仍然问自己这个问题，但我通过相信以下假设而取得了进展：

根据我的理解，导入是为了 postcss-preset-env 应用静态替换并跟踪它无法进行静态替换的位置，而导出是为了 postcss-preset-env 输出 CSS 中动态 CSS 行为所必需的变量。

B.将postcss-preset-env option preserve 设置为true。这样做应该告诉插件包含“预填充”CSS（就像您缺少的变量一样）。我对此有意见：

根据我的理解，exportTo 选项允许postcss-preset-env “预填充” CSS，以提高捆绑 CSS 的性能，而 preserve-set-to-false 选项提供捆绑 CSS 中的所有变量。

C.评估 Webpack 是否有意外行为。 Parcel 1.0 parses each CSS file independently, when bundling。在没有打包程序（没有 Webpack、Parcel、Rollup 等）的情况下，我通过 both 将 preserve 设置为 false and not来编译功能代码> 使用exportTo。请参阅“警告”部分。

谁能解释一下如何使用 postcss-preset-env 的 importFrom？

也许吧。您似乎正确地使用了importFrom。但是，您可以尝试这些步骤来获得上述任何答案。

回答 A

1. 通过importFrom 提供您希望postcss-preset-env 可用的变量（当它解析您的CSS 时）。
2. 通过exportTo 定义在何处创建您希望包含在最终 CSS 中的 CSS 文件。
3. 在最终的 CSS 中包含导出的 CSS。

答案 B

1. 测试将postcss-preset-env 选项preserve 设置为false 或true 是否可以解决问题。

答案 C

1. 独立于 Webpack 测试 PostCSS。我推荐postcss-cli。

警告

postcss-preset-env 的成功率，使用导入的变量并决定需要导出的变量，取决于：

• 传递给importFrom和exportTo的值的格式

  • 包含数据的文件的路径
  • 直接数据输入

• 变量的格式传递给importFrom和exportTo

  • CSS
  • JSON
  • JavaScript 对象

• 值/变量传递的顺序

plugin test cases 从文件中不测试命令； import test 仅测试具有基本用法的简单对象的单个订单。

我不知道订单的细节。可能需要更复杂的测试用例。

我使用Parcel（不是Webpack）的经验

不同的加载器，但相同的插件。

1. 如果这些变量源的格式是数组中的文件路径，那么顺序很重要：
   • 自定义选择器
   • 环境变量
2. 首先放置这两个变量源中的任何一个将使另一个无效。
3. 如果这两种变量源格式是一个 JavaScript对象和一个文件路径，那么订单很重要。
4. 如果这两种变量源格式都是 JavaScript 对象，那么顺序不重要。李>
5. 其他变量源的顺序（如果来自文件）似乎无关紧要。

参考

1. postcss-preset-env Issue #141: "Confused about importFrom and the expected output"
2. 个人试验和错误，以及一些系统测试。
3. postcss-preset-env 测试用例未涵盖文档中显示的示例。
4. 阅读我拔出的一撮头发，就好像它们是甲骨一样。?

Answer 2

这是一个比我的旧答案更新、不同、更新的答案。

确保importFrom 设置在特定功能插件的选项中，不是在postcssPresetEnv 选项中。

参见csstools/postcss-preset-env#202“能够导出自定义媒体但不能导出自定义属性”。