本文は主にwebpack+es 6+reactに基づいてcss module足場の構築についてである.css_からmodule_demoダウンロード関連事例、本稿では4つの可能なシナリオ構成からcssを起動する予定です.module.
css_module
css moduleが最も簡単な場合は、css-loaderでcss module構成を開始するだけです.
webpack css-loader

module: {
     rules: [{
         test:  [/\.js$/, /\.jsx$/, /\.es6$/],
         include: [
           path.resolve(__dirname, 'src'),
         ],
         use: {
           loader: "babel-loader"
         },
       }, {
         test: [/\.css/],
         exclude: path.resolve(__dirname, 'src/styles/global'),
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
                 modules: true,
                 localIdentName: '[name]__[local]-[hash:base64:5]'
             }
           }
         ]
      }, {
        test: [/\.css/],
        include: path.resolve(__dirname, 'src/styles/global'),
        use: [
          'style-loader',
          'css-loader'
        ]
      }]
   },

一般的なプロジェクトにはnormalizeがあります.cssまたはglobal.cssグローバルcssスタイルです.この場合、処理を必要としない場合は、2つのcssの管理方式を構成できます.具体的な使い方は、css_を参照してください.module_demo demo 1の構成.
css_module + less\scss
less、scssエディタと組み合わせる必要がある場合は、css-loaderと同様に、css、lessに関する構成で以下のように設定すればよい.

  ...
    {
         test: [/\.css$/, /\.less$/],
         exclude: path.resolve(__dirname, 'src/styles/global'),
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
                 modules: true,
                 localIdentName: '[name]__[local]-[hash:base64:5]'
             }
           },
           {
             loader: 'postcss-loader',
             options: {
               ident: 'postcss',
               plugins: (loader) => [
                 require('postcss-import')({ root: loader.resourcePath }),
                 require('postcss-cssnext')(),
                 require('autoprefixer')(),
                 require('cssnano')()
               ]
             }
           },
           'less-loader'
         ]
      }, {
        test: [/\.css$/, /\.less$/],
        include: path.resolve(__dirname, 'src/styles/global'),
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-cssnext')(),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          },
          'less-loader'
        ]
      }
...

これで私たちはappのようにlessの機能を使用することができます.less中

.global {
  text-align: left;
  font-size: 20px;
  composes: box from "../styles/views/layout.less";
  .title {
    font-size: 22px;
    color: red;
  }
  .title:before {
    content: 'before i come'
  }
  .title:hover {
    font-size: 40px;
  }
}

しかしcss moduleでは、titleでcomposesを定義するなど、サブセレクタでcomposeを使用することはできません.

.global {
  text-align: left;
  font-size: 20px;
  composes: box from "../styles/views/layout.less";
  .title {
    font-size: 22px;
    composes: heading from "../styles/views/typography.less";
    color: red;
  }
  .title:before {
    content: 'before i come'
  }
  .title:hover {
    font-size: 40px;
  }
}

次のようなエラーが表示されます.
ERROR in ./node_modules/.0.28.7@css-loader?{"modules":true,"localIdentName":"[name]__[local]-[hash:base64:5]"}!./node_modules/.2.0.8@postcss-loader/lib?{"ident":"postcss"}!./node_modules/.4.0.5@less-loader/dist/cjs.js!./src/components/app.less Module build failed: Error: composition is only allowed when selector is single :local class name not in ":local(.global) :local(.title)"
css moduleの著者はissues/261で「Componentworks differently to mixins.It does not mutates rules,just concatenates.」
css_module + react-css-modules
スタイルごとにstyle.*の形式は面倒で、react-css-modulesを使ってこの問題を解決することができます.例えばapp.js中

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CSSModules from 'react-css-modules';
import { Link } from 'react-router-dom';
import styles from './app.less'
class App extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            

                
css module test case
                

                    
CompositionOverrides
                    
GlobalSelectors
                    
ScopedAnimations
                    
ScopedSelectors
                    
StyleVariantA
                
                {this.props.children}
            
        );
    }
}
export default CSSModules(App, styles)

react-css-modulesの欠点は、実行時の依存性が必要であり、実行時にclassNameを取得する必要があり、パフォーマンスの損失が大きいことです.比較的大きなプロジェクトでは、大きな遅延が発生します.では、この問題をどのように解決するかは、bable-plugins-react-css-modulesを使用してclassNameをコンパイルフェーズに前置きすることができます.
css_module + bable-plugins-react-css-modules
bable-plugins-react-css-modulesはreact-css-modulesと同じ著者らが開発したツールであり、bable-plugins-react-css-modulesはreact-css-modulesに比べて性能面で大きな向上を遂げた.Bable-plugins-react-css-modulesには2つの構成方式があり、1つはwebpackに構成する.config.js,2は配置する.babelrcでは、本稿ではwebpackに構成する.config.jsで.

       ...
       {
       test:  [/\.js$/, /\.jsx$/, /\.es6$/],
         include: [
           path.resolve(__dirname, 'src'),
         ],
         use: {
           loader: "babel-loader",
           options: {
             cacheDirectory: true,
             plugins: [
               [ "react-css-modules", {
                 context: path.resolve(__dirname, "src"),
                 "generateScopedName": "[path][name]__[local]--[hash:base64:5]"
               }]
             ]
           }
         },
       }
      ...

まとめ
css moduleは柔軟性、移植しやすいという利点があり、less、scssなど多くのcssコンパイラと組み合わせて使用できます.本文はwebpack css-loaderに依存し、css module、css module+lessscss、css module+react-css-modules、css module+babel-plugin-react-css-modulesの4種類のcss_を構成した.moduleの使い方.
参考文献

CSS Modules入門及びReactにおける実践

CSS Modulesの詳細とReactの実践

CSS Modules in React