web-dev-qa-db-ja.com

CSSモジュールでグローバル変数を使用する方法

CSS =モジュールでReactを学ぶのに忙しいのですが、変数をどのように格納するのかよくわかりませんか？たとえば、Sassではこれを行うことができます：

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

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

CSSモジュールでこれをどのように達成しますか？

reactjswebpackcss-modules
8
user818700

1つの方法は、依存関係を使用することです。例えば、

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

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

詳細については、こちらをご覧ください： https://github.com/css-modules/css-modules#dependencies

Webpackを使用している場合は、ここに他の例があります： https://github.com/webpack/css-loader#composing-css-classes

また、webpackを使用している場合でも、CSSモジュールでSassを使用できます。

3
franky

CSS-Modulesのドキュメントでは、ここで変数について言及しています： 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 webpack設定に追加する必要があります。下記参照：

        {
            test: /\.css$/,
            use: [{
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        localIdentName: '[name]_[local]_[hash:base64:5]'
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [postcssModulesValues]
                    }
                }
            ]
        }
10
lcharbon

これをチェック

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


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

.component{
  color: var(--color-black);
}
2
Mantas

sassプリプロセッサおよびsass-resources-loader。

sass-resources-loaderは、すべての変数、ミックスインなどを必要な各sassファイルに追加します。

0
Arseniy-II