CSSモジュールでグローバル変数を使用するには？

Question

私はCSSモジュールとの反応を勉強するのに忙しく、どのように変数を格納するのかよく分かりません。たとえば、Sassでこれを行うことができます：

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

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

これをCSSモジュールでどうやって実現できますか？

Answer 1

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モジュール

Answer 2

CSS-モジュールのドキュメントには、ここで変数を言及：これにより https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md

はそんなにとして変数をインポートすることができます。

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

：あなたのCSSで使用することができ

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

この作業を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] 
        } 
       } 
      ] 
     } 

Answer 3

あなたはSASSプリプロセッサとsass-resources-loaderを使用することができます。

sass-resources-loaderは、必要なすべてのsassファイルにすべての変数、mixinsなどを追加します。