答案

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

答案

我在做什么错了？

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

已经取得了进步：

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

或者，将postcss-preset-env option preserve设置为true。这样做应该告诉插件包括“预填充” CSS（例如您丢失的CSS）变量）。我对此有一个观点：

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

我已经未测试了两者（A）将值设置为false 和（B）未< / strong>使用exportTo。

任何人都可以解释一下如何使用postcss-preset-env的importFrom吗？

也许。您似乎正确使用了importFrom。但是，您可以尝试将exportFrom添加到该过程中。

通过importFrom提供postcss-preset-env想要的变量（在解析CSS时）。

这些用于执行静态替换。

通过exportTo定义在何处创建要包含在最终CSS中的CSS文件。

这些是必须留在CSS中的所有变量（在postcss-preset-env解析之后），因为postcss-preset-env可能未对所有变量使用静态替换。

考虑是否将postcss-preset-env选项preserve设置为false或true。

将导出的CSS包含在最终CSS中。

警告

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

传递给importFrom和exportTo
的值的格式

包含数据的文件的路径

直接数据输入

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

CSS

JSON

JavaScript对象

传递值 / 变量的顺序

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

订单的细节使我难以理解。可能需要更复杂的测试用例。

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

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

如果这些变量源的格式是数组中的文件路径，则顺序很重要：

自定义选择器

环境变量

首先放置这两个变量中的任何一个都会使另一个无效。

如果这两种可变源格式是 one JavaScript对象和 one 文件路径，则订单很重要。

如果这两种可变源格式都是两者 JavaScript对象，则 order并不重要。。
其他变量源的顺序（如果来自文件）似乎无关紧要。

参考

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

Answer 2

<块引用>

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

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

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

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

2 个答案:

答案

警告

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

参考