webpackでcssnextを使用して1つの変数ファイルを作成できますか？

Question

私は、各反応コンポーネントのためのcssファイルのセットを持つプロジェクトを持っています。私はwebpackとpostcss-cssnextでcss-loader（モジュールを使用）を使用しています。

私は単一のvariables.cssが理想的なので、CSSファイル全体で変数を共有できます。私はそのように、それはCSSローダーを通過インポート

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

：私のようなものを含むvariables.cssを持つ試みました。問題は、他のファイルがこれらの変数に依存しないため、これは機能しないか、何か間違ったことです（これはコンポーネントのcssファイルで直接動作します）。このかかわらの主な問題は、私はそう（WebPACKのdevのサーバーを再起動する必要が変数を変更するたびにある

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

：作業を行い

ことの一つは、次のWebPACKのセットアップとstyles.jsonファイルを持っていますwebpack設定をリロードする）。これは理想的ではありません。

だから、これを行うためのよりよい方法に関する考えはありますか？

Answer 1

変数（少なくとも現時点では）は、cssnext-loader内のインポートされたcssファイル間で共有されません。

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

Answer 2

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); 
}