class class name two kinds of reference in webpack project

I. Description of the problem

In the project, we usually only use css module, also used a less common file reference code and webpack configuration is as follows, running, found that only css module to work, how to make both work?

// exp1.less 
.box { 
  the display: Flex; 
  The justify - Content: Center; 
  align = left - items: Center; 
  width: 100% ; 
  height: 100% ; 
} 

// exp2.less 
.pf { 
  Color: Aquamarine; 
  font - size : 20px; 
} 

// JSX file 
Import './exp1.less'; // common usage 
Import Styles from './exp2.less'; // CSS Module1
 
<className = div 'Box'> 
  <className = {P Styles .pf}> test cssmodule syntax </ P> 
</ div>

// webpack配置文件。
{
        test: /\.less$/,
        exclude:'node_modules',
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    minimize: false,
                    modules: true,
                    localIdentName: '[name]_[local]_[hash:base64:5]'
                }
            },
            'less-loader'
        ]
}

Second, the problem analysis

This is due to webpack loader configuration not caused.

Third, the solution

1, are written in less files, but be placed in a different directory and modify webpack configuration.

// exp1.less 
.box { 
  the display: Flex; 
  The justify - Content: Center; 
  align = left - items: Center; 
  width: 100% ; 
  height: 100% ; 
} 

// exp2.less 
.pf { 
  Color: Aquamarine; 
  font - size : 20px; 
} 

// JSX file 
Import './exp1.less'; // common usage 
Import Styles from './cml/exp2.less'; // CSS Module1
 
<className = div 'Box'> 
  <className = P {styles.pf}> test cssmodule syntax </ P> 
</ div> //

webpack profile, cml for the directory name, put the unity of less need css module file. 
{ 
        Test: /\.less$/ , 
        the exclude: / ( the node_modules | CML) / , 
        use: [ 
            MiniCssExtractPlugin.loader, 
            { 
                Loader: 'CSS-Loader' 
            },
             'less-Loader' 
        ] 
}, 
{ 
        Test: / \ $ the .less / , 
        the exclude: / the node_modules / , 
        the include: / CML / , 
        use: [ 
            MiniCssExtractPlugin.loader, 
            { 
                Loader:'css-loader',
                options: {
                    minimize: false,
                    modules: true,
                    localIdentName: '[name]_[local]_[hash:base64:5]'
                }
            },
            'less-loader'
        ]
},

2, written in css files and less files in the same directory. ( Recommended )

// exp1.css 
.box { 
  the display: Flex; 
  The justify - Content: Center; 
  align = left - items: Center; 
  width: 100% ; 
  height: 100% ; 
} 

// exp2.less 
.pf { 
  Color: Aquamarine; 
  font - size : 20px; 
} 

// JSX file 
Import './exp1.css'; // common usage 
Import Styles from './exp2.less'; // CSS Module1
 
<className = div 'Box'> 
   <className = {P Styles .pf}> test cssmodule syntax </ P> 
</ div> // WebPACK profile. 
{


        test: /\.less$/,
        exclude:'node_modules',
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    minimize: false,
                    modules: true,
                    localIdentName: '[name]_[local]_[hash:base64:5]'
                }
            },
            'less-loader'
        ]
}

3, the Uniform Code style team

In particular, in the same project, it is recommended to use the same kind of name reference, or are used in the normal way.

// exp1.less 
.box { 
  the display: Flex; 
  The justify - Content: Center; 
  align = left - items: Center; 
  width: 100% ; 
  height: 100% ; 
} 

// exp2.less 
.pf { 
  Color: Aquamarine; 
  font - size : 20px; 
} 

// JSX file 
Import './exp1.less'; // common usage 
Import './exp2.less'; // common usage
 
<className = div 'Box'> 
  <className = P 'PF'> test cssmodule grammar </ the p-> 
</ div>

// webpack配置文件
{
        test: /\.less$/,
        exclude:/node_modules/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader'
            },
            'less-loader'
        ]
}

4, the Uniform Code style team ( recommended )

In particular, in the same project, it is recommended to use the same kind of name reference, all with css module.

// exp1.less
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

// exp2.less
.pf {
  color: aquamarine;
  font-size: 20px;
}

// jsx文件
import  style1 from './exp1.less'; //css module
import styles from './exp2.less'; //css module

<div className={style1.box}>
  <p className={styles.pf}>测试cssmodule语法</p>
</div>

// webpack配置文件
{
        test: /\.less$/,
        exclude:/node_modules/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    minimize: false,
                    modules: true,
                    localIdentName: '[name]_[local]_[hash:base64:5]'
                }
            },
            'less-loader'
        ]
},