10

css ファイルのセット (react コンポーネントごとに 1 つ) を持つプロジェクトがあります。私は、webpack と postcss-cssnext で css-loader (モジュールをオン) を使用しています。

variables.css理想的には、css ファイル間で変数を共有できるように単一が必要です。私はvariables.css次のようなものを含めてみました:

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  ...
}

それをインポートして、cssローダーを通過します。問題は、他のファイルがこれらの変数を取得しないため、これが機能しないか、何か間違っていることです (これをコンポーネント css ファイルに直接含めると機能します)。

機能することの 1 つはstyles.json、次の webpack セットアップを含むファイルを用意することです。

postcss: function (webpack) {
    return [
        ...
        require("postcss-cssnext")({
          features: {
            customProperties: {
              variables: require('./src/styles.json')
            }
          }
        })
        ...
    ]
}

ただし、これに関する主な問題は、変数を変更するたびに、webpack dev サーバーを再起動する必要があることです (したがって、webpack 構成をリロードします)。これは理想的ではありません。

それで、これを行うためのより良い方法について何か考えはありますか？

4

2 に答える 2

6

使用postcss-importする方法です。CSS モジュールを使用したサンプル構成を次に示します。

{ 
  test: /\.css$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css?modules&localIdentName=[name]--[local]&sourceMap&importLoaders=1!postcss"
  )
}

そして、postcss 設定で:

postcss: [
  require("postcss-import")({
    path: baseDir,
    addDependencyTo: webpack
  }), 
  require("postcss-cssnext")
]

このpath設定はpostcss-import、ここで指定されたディレクトリも調べてパスを解決するように指示します。

最後に、CSS モジュール ファイルで、次のように言いますButton.css。

@import "styles/constants/constants.css";

.normal {
  font-size: 24px;
  color: var(--figmaBlue);
}
于 2016-06-28T23:51:34.883 に答える
2

変数を (少なくとも現時点では) :root {} に入れても、cssnext-loader にインポートされた css ファイル間で変数は共有されません。

私が見つけた単純な解決策は、postcss-cssnext の前に postcss-import プラグインを使用することです。
@import 'variables.css';
設定後、これらの変数にアクセスする .css ファイル内に移動する必要があります。

于 2016-02-03T10:38:12.440 に答える