Повторное использование переменных во всех файлах css- с использованием postcss-cssnext и, в частности, postcss-custom-properties с css-модулями

Я использую css-модули вместе с postcss-cssnext и, в частности, его функцию postcss-custom-properties

Я также использую реактивный шаблон ( https://github.com/mxstbr/react-boilerplate/), и этот очень хороший шаблон поставляется с этими модулями, используемыми в нем

Моя структура папок:

Main folder
    app
        containers
            App
                styles.css
                index.js
            HomePage
                styles.css
                index.js

        components
            Component1
                styles.css
                index.js
            Component2
                styles.css
                index.js

Приложение / styles.css

:root {
    --varA: #1eb3ab;
    --varB: #1eb3ab;
    --varC: #1eb3ab;
    --varD: #1eb3ab;
    --varE: #1eb3ab;

}

body {
    color: var(--varA)  /*works fine */
}

Я хочу использовать эти переменные в App/styles.css (или я с удовольствием определю их где-нибудь еще, и в этом случае, как мне это сделать) в других контейнерах и компонентах.

Я пробовал (для использования в css-модулях)

Главная /index.js

..
..

<div className={styles.myClass}> Content </div>

..

Домашняя страница / styles.css - подход 1

:root{
  --varA: tealish from "containers/App/styles.css";     /* DOESNT WORK */
}

.myClass {
    color: var(--varA)
}

HomePage / styles.css - подход 2

.myClass {
    color: var(--varA from "containers/App/styles.css")     /* DOESNT WORK  AS WELL*/
}

Какое самое элегантное решение? Я хочу иметь все переменные в одном файле / одном месте и использовать их во всех файлах CSS красиво

Я также видел variables в postcss-custom-properties https://github.com/postcss/postcss-custom-properties. Но я не уверен, как использовать в моем определении веб-пакета, который использует postcss-cssnext

webpack.dev.babe.js - как поставить опцию VARIABLES здесь

// Process the CSS with PostCSS
  postcssPlugins: [
    postcssFocus(), // Add a :focus to every :hover
    cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
      browsers: ['last 5 versions', 'IE > 8'], // ...based on this browser list

      // I think I need to add some line here, but not sure what


    }),
    postcssReporter({ // Posts messages from plugins to the terminal
      clearMessages: true,
    }),
    postcssAnimation(),
  ],
Источник

2 ответа

Решение

Я бы порекомендовал postcss-custom-properties "переменные" опции.

У вас есть пример в документации

http://cssnext.io/usage/

cssnext({
  features: {
    customProperties: {
      variables: {
        mainColor: "red",
        altColor: "blue",
      }
    }
  }
})
Источник

Обычно я достигаю этого с помощью postcss-import, поэтому каждый модуль, который должен использовать "переменные", должен импортировать частичное.

@import 'path/to/variables';

.myClass {
  color: var(--colorGray);
}

Этот подход работает как с пользовательскими свойствами, так и с пользовательскими наборами свойств.

Похожий вопрос.

Источник
Другие вопросы по тегам