PHPでのCSSModulesの使用方法（非SPA）

Question

したがって、私はCSSModulesのメリットを通常のPHPプロジェクト（より具体的にはWordPressテーマ）に使いたいと考えています。私はautoprefixer、browsersync、postcssなどの開発中にプロジェクトの一部をコンパイルしてホットリロードするためにwebpackを使用しています。私は使用したいpostcss-modulesというpostcssのプラグインもあることを理解しています。

プラグインは、すべてのCSSクラスにハッシュを追加していて、期待どおりにマッピングされたjsonを出力しています。今、私はあなたがReactでCSSモジュールを使用するときに行うように、各PHPファイルに1つのcssモジュール（これはscssファイルがコンパイルされていない）をバインドしたいと思います。私はこれをどのようにするべきですか？私はまだコンパイルした後、大きなファイルに抵抗するCSSが好きです。

これは私のWebPACKの設定の一部です：

{ 
    test: /\.(scss|css)$/, 
    use: extractSass.extract({ 
     use: [{ 
     loader: "css-loader" 
     }, 
     { 
     loader: 'postcss-loader', 
     options: { 
      plugins: function() { 
      return [ 
       require('precss'), 
       require('autoprefixer'), 
       require('cssnano'), 
       require('postcss-modules') 
      ]; 
      } 
     } 
     }, 
     { 
     loader: "sass-loader" 
     }], 
     fallback: "style-loader" 
    }) 
    }, 

そして、私はWebPACKの中のエントリポイントとしてmain.jsとstyle.scssを使用しています。 style.scssは、すべての部分的なscssファイル（それぞれ1つのcssモジュールでなければなりません）をインポートします。

Answer 1

これを行う方法についてはreally good writeupでした。唯一の違いは、Webpackの代わりにgrunt-postcssを使用して、postcssのプラグインと機能を処理することです。概念をWebpackに移植するのは簡単です。

重要なのは、別々のpcssファイルをモジュールとして扱うようにpostcss-modulesを設定することです。そうすれば、モジュールごとにJSONを個別に解析できます。 globalModulePathsを使用すると、メインのpcssをそのまま維持してモジュールを追加することができます。