一、问题描述
在项目工程中，我们通常既用到css module，也用到普通的less文件引用方式，代码及webpack配置如下，运行时，发现只有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 ‘./exp1.less‘; //普通用法 import styles from ‘./exp2.less‘; //css module <div className=‘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‘ ] }
二、问题分析
这是由于webpack加载器配置不对引起的。
三、解决方案
1、都写成less文件，但是要放在不同目录，并且修改webpack配置。
// 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 ‘./exp1.less‘; //普通用法 import styles from ‘./cml/exp2.less‘; //css module <div className=‘box‘> <p className={styles.pf}>测试cssmodule语法</p> </div> // webpack配置文件，cml为目录名，统一放需要css module的less文件。 { test: /\.less$/, exclude:/(node_modules|cml)/, use: [ MiniCssExtractPlugin.loader, { loader: ‘css-loader‘ }, ‘less-loader‘ ] }, { test: /\.less$/, exclude:/node_modules/, include:/cml/, use: [ MiniCssExtractPlugin.loader, { loader: ‘css-loader‘, options: { minimize: false, modules: true, localIdentName: ‘[name]_[local]_[hash:base64:5]‘ } }, ‘less-loader‘ ] },
2、写成css文件和less文件，放在同一目录。（推荐）
// exp1.css .box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } // exp2.less .pf { color: aquamarine; font-size: 20px; } // jsx文件 import ‘./exp1.css‘; // 普通用法 import styles from ‘./exp2.less‘; //css module <div className=‘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‘ ] }
3、在团队中统一代码风格
尤其在同一个项目中，推荐使用同一种类名引用方式，要么都用普通方式。
// 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 ‘./exp1.less‘; //普通用法 import ‘./exp2.less‘; //普通用法 <div className=‘box‘> <p className=‘pf‘>测试cssmodule语法</p> </div>
// webpack配置文件 { test: /\.less$/, exclude:/node_modules/, use: [ MiniCssExtractPlugin.loader, { loader: ‘css-loader‘ }, ‘less-loader‘ ] }
4、在团队中统一代码风格（推荐）
尤其在同一个项目中，推荐使用同一种类名引用方式，都用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‘ ] },
原文：https://www.cnblogs.com/camille666/p/webpack_less_classname.html