Может ли кто-нибудь объяснить, как использовать importFrom postcss-preset-env?

Я пытаюсь использовать 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 жалуются, что переменные не установлены, а реальных цветов нигде не видно.

Что я делаю неправильно?

P. S. Я также пробовал аналогичную настройку с импортом Webpack css-loader, с точно такими же результатами...

🤔 А знаете ли вы, что...
CSS поддерживает разнообразные селекторы, которые позволяют выбирать элементы на веб-странице.

[РЕШЕНО]Перейти к решению

2 309

Css75481 вопрос Webpack7705 вопросов Postcss109 вопросов Css variables149 вопросов

Ответы:

Решено

Update
Consider my later, simpler, more up-to-date answer: https://stackoverflow.com/a/67610503/11817077

Ответы

What am I doing wrong?

Однозначного ответа может и не быть. Попробуйте эти.

О. Вы не экспорт переменных. Я предлагаю попробовать импортировать переменные, которые вы хотите использовать, а затем экспортировать переменные. «Зачем экспортировать то, что уже нужно импортировать?!» Я все еще спрашиваю себя об этом, но я добился прогресса, поверив в следующее предположение:

Based on my understanding, importing is for postcss-preset-env to apply static replacements and track where it cannot make a static replacement, while exporting is for postcss-preset-env to output variables that are necessary in the CSS for dynamic CSS behavior.

B. Установите postcss-preset-env вариант preserve на true. При этом должен говорит плагинам включать «предварительно полифиллированный» CSS (например, отсутствующие переменные). У меня есть мнение против этого:

Based on my understanding, the exportTo option allows postcss-preset-env to "pre-polyfill" the CSS, in order to improve performance of bundled CSS, while the preserve-set-to-false option provides all variables in the bundled CSS.

C. Оцените, имеет ли Webpack неожиданное поведение.Parcel 1.0 анализирует каждый файл CSS независимо при объединении. Без упаковщика (без Webpack, Parcel, Rollup и т. д.) я скомпилировал функциональный код, установив обеpreserve в falseа такженет, используя exportTo. См. раздел «Предупреждение».

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

Может быть. Кажется, вы правильно используете importFrom. Но вы можете попробовать эти шаги для любого из приведенных выше ответов.

Ответ А

Предоставьте через importFrom переменные, которые вы хотите сделать доступными для postcss-preset-env (пока он анализирует ваш CSS).
Определите с помощью exportTo, где создать файл CSS, который вы хотите включить в свой окончательный CSS.
Включите экспортированный CSS в окончательный CSS.

Ответ Б

Проверьте, решает ли проблема установка параметра postcss-preset-envpreserve на false или true.

Ответ С

Тестируйте PostCSS независимо от Webpack. Я рекомендую postcss-cli.

Предупреждение

Вероятность успеха postcss-preset-env, используя импортированные переменные и определяя переменные, необходимые для экспорта, зависит от:

формат из значения, переданный importFrom и exportTo
- пути к файлам с данными
- прямой ввод данных
формат из переменные, переданный importFrom и exportTo
- CSS
- JSON
- Объект JavaScript
заказ, в котором передаются значения/переменные

тестовые примеры плагинов выполняет тестовый заказ нет из файлов; import тестовое задание проверяет только один заказ из простых объектов с базовым использованием.

Детали заказа ускользают от меня. Могут потребоваться более сложные тестовые случаи.

Мой опыт использования Пакет (не Webpack)

Другой загрузчик, но тот же плагин.

Если форматом этих источников переменных являются пути к файлам в массиве, то порядок имеет значение:
- пользовательские селекторы
- переменные среды
Размещение одного из источников переменной эти двое первым сделает другой неэффективным.
Если исходные форматы переменных эти двое являются один объектом JavaScript а такжеодин путь к файлу, то порядок имеет значение.
Если исходные форматы переменных эти двое являются объектами JavaScript обе, то порядок имеет значение нет.
Порядок источников переменных разное, если они из файлов, не имеет значения.

Ссылка

postcss-preset-env Проблема № 141: «Запутался в importFrom и ожидаемом результате»
Личные пробы и ошибки, а также систематическое тестирование.
Тестовые случаи postcss-preset-env не охватывают примеры, показанные в документации.
Читая мои вырванные пряди волос, словно они кости оракула. ?

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

Убедитесь, что importFrom установлено в параметрах конкретного функционального плагина, нет в параметрах postcssPresetEnv.

См. csstools/postcss-preset-env#202 «Возможность экспорта пользовательских медиа, но не пользовательских свойств».