Как использовать глобальные переменные в CSS-модулях?

Я занят изучением React с CSS-модулями и не совсем понимаю, как можно хранить переменные? Например, в Sass вы можете сделать это:

// _variables.scss
$primary-color: #f1f1f1; 

// heading.scss
@import './variables';
.heading {
  color: $primary-color
}

Как вы достигаете этого в модулях CSS?


webpack reactjs css-modules
person Community    schedule 24.11.2016    source источник

Ответы (4)


arrow_upward
7
arrow_downward

Одним из способов может быть использование зависимостей. Например,

// variables.css
.primaryColor {
  color: #f1f1f1
}

// heading.css
.heading {
  composes: primaryColor from "./variables.css"
}

См. более подробную информацию здесь: https://github.com/css-modules/css-modules#dependencies

Если вы используете веб-пакет, здесь есть еще примеры: https://github.com/webpack/css-loader#composing-css-classes

Также, если вы используете webpack, вы все равно можете использовать Sass с модулями CSS.

person franky    schedule 24.11.2016
comment
Хотя композиция является вариантом, я бы посоветовал следовать ответу Ичарбона. С postcss у вас есть реальная поддержка переменных, и это поможет сохранить код DRY'er. Тем не менее, модули CSS и Sass можно использовать вместе, поэтому я бы предпочел переменные Sass упомянутому синтаксису @Value. - person Andrew; 19.02.2019
comment
состав !== переменные. - person jjalonso; 28.02.2019
comment
Хотя это работает для этого примера, этот ответ не является ответом на вопрос, как вы можете использовать глобальные значения с модулями CSS, ха-ха. Например, что, если я хочу использовать этот цвет как для фона, так и для цвета? - person Jay; 12.03.2019

arrow_upward
24
arrow_downward

Проверь это

//vars.css
:root {
  --color-black: #222;
}


//myComponent.module.css
@import './vars.css';

.component{
  color: var(--color-black);
}
person Mantas    schedule 20.04.2019

arrow_upward
15
arrow_downward

В документации CSS-модулей переменные упоминаются здесь: https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md

При этом вы можете импортировать переменные так:

@value colors: "../../main/colors.css";
@value primary, secondary, tertiary from colors;

который можно использовать в вашем css:

.main {
    background-color: tertiary;
    border-top: 30px solid primary;
}

Чтобы это работало, postcss-loader и postcss-modules-values необходимо добавить в конфигурацию вашего веб-пакета. Смотри ниже:

        {
            test: /\.css$/,
            use: [{
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        localIdentName: '[name]_[local]_[hash:base64:5]'
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [postcssModulesValues]
                    }
                }
            ]
        }
person lcharbon    schedule 10.08.2017
comment
localIdentName теперь переместился внутрь модулей. Вы можете сделать: modules: {auto: true, localIdentName: "[name]_[local]_[hash:base64:5]",} - person KJ Sudarshan; 21.09.2020

arrow_upward
0
arrow_downward

Вы можете использовать препроцессор sass и sass-resources-loader< /а>.

sass-resources-loader добавит все ваши переменные, примеси и т. д. в каждый необходимый файл sass.

person Arseniy-II    schedule 19.02.2018