谁能解释一下如何使用 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 抱怨变量未设置，实际颜色无处可见。

我究竟做错了什么？

---

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

Answer 1

更新

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

答案

我究竟做错了什么？

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

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

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

B. 将postcss-preset-env选项preserve设置为true。这样做应该告诉插件包含“预填充”的 CSS（比如你丢失的变量）。我有一个反对意见：

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

C. 评估 Webpack 是否有意外行为。 Parcel 1.0 在捆绑 .css 文件时独立解析每个 CSS 文件。如果没有一个捆绑（无的WebPack，包裹，汇总等），我通过编译功能码都设置preserve到false 和 不使用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使用导入的变量并决定导出所需的变量的成功率取决于：

• 传递给和的值的格式importFromexportTo

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

• 传递给和的变量的格式importFromexportTo

  • CSS
  • JSON
  • JavaScript 对象

• 的顺序，其中，值/变量被传递

该插件的测试案例都没有测试从文件秩序; 该import 测试只测试从基本的使用简单对象单个订单。

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

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

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

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

参考

1. postcss-preset-env问题 #141：“importFrom对预期输出感到困惑”
2. 个人试错，以及一些系统的测试。
3. 该postcss-preset-env测试用例没有覆盖文档中的示例。
4. 读我拔出的头发，好像它们是甲骨文。