谁能解释一下如何使用 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

Update

Consider my later, simpler, more up-to-date answer:

答案

What am I doing wrong?

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

一个。你不是 exporting the variables. 我建议尝试导入你想使用的变量，然后导出变量。 “为什么要出口你已经必须进口的东西？！”我仍然这样问自己，但我已经通过相信以下假设:

取得了进步

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

乙。将 postcss-preset-env option preserve 设置为 true。 这样做应该告诉插件包含“pre-polyfilled” CSS（比如你缺少的变量）。我对此有意见：

根据我的理解，exportTo选项允许postcss-preset-env到“pre-polyfill”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 不使用 exportTo。请参阅“警告”部分。

Could anyone please explain how to use postcss-preset-env's importFrom?

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

答案A

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

答案B

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

答案C

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

警告

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

传递给importFrom和exportTo[=的值的格式 52=]
- 包含数据的文件路径
- 直接数据输入
传递给importFrom和exportTo[=]的变量的格式 52=]
- CSS
- JSON
- JavaScript 对象
顺序，其中值/变量被传递

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

订单的详细信息让我望而却步。可能需要更复杂的测试用例。

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

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

如果这些变量源的格式是数组中的文件路径，那么顺序很重要：
- 自定义选择器
- 环境变量
将这两个变量源中的任何一个放在首位会使另一个无效。
如果那两个变量源格式是一个JavaScript对象和一个文件路径，然后顺序很重要.
如果那两个变量源格式都是两个 JavaScript对象，那么顺序不重要.
其他变量源的顺序，如果来自文件，似乎无关紧要。

参考

postcss-preset-env Issue #141: "Confused about importFrom and the expected output"
个人试错，一些系统测试。
postcss-preset-env 测试用例未涵盖文档中显示的示例。
读我的pulled-out一团团头发仿佛是甲骨文

Answer 2

This is a newer, different, more up-to-date answer than my old one.

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

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

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

Could anyone please explain how to use postcss-preset-env's importFrom?

css

css-variables

webpack

postcss

Update

答案

警告

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

参考