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

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

Ответы

Что я делаю не так?

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

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

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

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

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

Возможно. Вы, похоже, правильно используете 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. Проверка PostCSS независимо от Webpack.Я рекомендую postcss-cli.

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

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

• формат из значений , переданных в importFrom и exportTo

  • путь(s) к файлам с данными
  • прямой ввод данных

• формат переменных , переданных вimportFrom и exportTo

  • CSS
  • JSON
  • Объект JavaScript

• порядок , в котором значения / переменные передаются

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

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

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

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

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

Ссылка

1. postcss-preset-env Выпуск № 141: «Смущен importFrom и ожидаемым результатом»
2. Личные проб и ошибок, а также некоторые систематические проверки.
3. Контрольные примеры postcss-preset-env не охватывают примеры, показанные в документации.
4. Чтение моих выдернутых пучков волос, как будто это кости оракула. ​​ ?