class类名在webpack项目中的两种引用方式

一、问题描述

在项目工程中，我们通常既用到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'
        ]
},