一、问题描述

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

class类名在webpack项目中的两种引用方式的更多相关文章

  1. Javaweb学习笔记——(六)——————xml中jaxp两种解析方式和dom4j运用

    1.xml的scheam约束 dtd的语法:<!ElEMENT 元素名称 约束> **schema符合xml的语法,xml语句 **一个xml中可以有多个schema,多个schema使用 ...

  2. javascript中对象两种创建方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 测开之路一百零五:bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  4. css的两种引用方式 link和@import

    学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...

  5. Java中的四种引用方式

      无论是通过引用计数算法判断对象的引用数量,还是通过可达性分析算法判断对象的引用链是否可达,判定对象是否存活都与"引用"有关.在Java语言中,将引用又分为强引用.软引用.弱引用 ...

  6. String中的两种实例化方式的区别

    直接赋值:(String str = "字符串");只会开辟一块堆内存空间,并且会自动保存在对象池中以供下次重复使用. 构造方法:(String str = new  String ...

  7. iOS中的两种搜索方式UISearchDisplayController和UISearchController

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 以前iOS的搜索一般都使用UISearchDisplayCon ...

  8. web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例

    ()post http://04101334.iteye.com/blog/637695/ ()get function serializeElement(element) { var method ...

  9. Hibeernate中的两种分页方式

    1. return getHibernateTemplate().executeFind(new HibernateCallback() { public Object doInHibernate(S ...

随机推荐

  1. git分支相关的命令

    Git 分支管理及结合gitlab的使用 说明有关gitlab的说明及基本操作,请参考:https://blog.51cto.com/wutengfei/2090253使用git分支的作用,我们先来说 ...

  2. Hive ACID和事务表支持详解

    一.ACID介绍 ACID就是常见数据库事务的四大特性:Atomicity(原子性).Consistency(一致性).Isolation(隔离性).Durability(持久性). 在Hive 0. ...

  3. PHP CURL 错误码说明

    curl_setopt($ci, CURLOPT_HEADERFUNCTION, array($this, 'getHeader'));//一般不加 <?php return [ '1'=> ...

  4. Bzoj 2875: [Noi2012]随机数生成器(矩阵乘法)

    2875: [Noi2012]随机数生成器 Time Limit: 10 Sec Memory Limit: 512 MB Submit: 2052 Solved: 1118 Description ...

  5. 记录一个webstorm的设置或者说小技巧

    在 html 的元素中,如果输入属性,默认会填充 引号,在 react 书写中非常不方便. 其中的JSX很多时候是不需要 quotation 的,只是需要一个 括号 {} 即可. 自己找了下webst ...

  6. [php][thinkphp] 记一次Composer Linux版安装以及用它进行thinkphp项目初始化

    Composer安装thinkphp,thinkphp5.1开始官网不在提供下载包,只能通过git clone 和Composer包管理器进行下载. php中开启exec,system等函数调用系统命 ...

  7. ZR#985

    ZR#985 解法: 可以先假设每个区间中所有颜色都出现,然后减掉多算的答案.对每种颜色记录它出现的位置,则相邻两个位置间的所有区间都要减去,时间复杂度 $ O(n) $ . 其实可以理解为加法原理的 ...

  8. ICEM-轴

    ​https://yunpan.cn/cuy98EwwXvYkb  访问密码 0897

  9. 依赖倒置原则(DIP)

    1. 定义 (1)高层模块不应依赖于低层模块,两者都应该依赖于抽象.(2)抽象不应该依赖于细节,细节应该依赖于抽象. 为什么是“倒置”这个词? 这是由于许多传统的软件开发方法,比如结构化分析和设计,总 ...

  10. mac编译Cpython

    源代码中有什么? CPython 源代码分发包含各种工具,库和组件.我们将在本文中探讨这些内容. 首先,我们将重点关注编译器.先从 git 上下载 Cpython 源代码. git clone htt ...