前言

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。

比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module

一、产生问题的原因

{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[hash:base64:6]'
}
},
'postcss-loader'
]
}

以上代码片段,摘自webpack配置的module.rule

可以看出wepack在编译过程中,遇到.css结尾的文件,都会交由postcss-loadercss-loaderstyle-loader依次处理。

因为css-loader开启了css模块功能,所以,所有经过处理的css文件,类名都将被改变。

二、初步改进

使用excludeinclude进行区分

1.node_module文件夹内的文件,避免被当前rule处理

{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[hash:base64:6]'
}
},
{
loader: 'postcss-loader'
}
],
exclude:[path.resolve(__dirname, '..', 'node_modules')]
}

如上所示,将node_module文件夹内的文件,用exclude排除在外,不用当前rule进行处理。

2.单独处理node_module内的css文件

{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
}
],
include:[path.resolve(__dirname, '..', 'node_modules')]
}

三、升级版,支持css module模式和普通模式混用

1.用文件名区分两种模式

  • *.global.css 普通模式
  • *.css css module模式

这里统一用 global 关键词进行识别。

2.用正则表达式匹配文件

// css module
{
test: new RegExp(`^(?!.*\\.global).*\\.css`),
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[hash:base64:6]'
}
},
{
loader: 'postcss-loader'
}
],
exclude:[path.resolve(__dirname, '..', 'node_modules')]
} // 普通模式
{
test: new RegExp(`^(.*\\.global).*\\.css`),
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader'
}
],
exclude:[path.resolve(__dirname, '..', 'node_modules')]
}

四、其他问题

less在使用css module时,对url的解析存在冲突,可以用resolve-url-loader进行解决,直接上代码:


test: /\.less/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: 2
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
{
loader: "resolve-url-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true
}
}
]

参考

[1] Updated README regarding relative filepaths issue #121

webpack项目轻松混用css module的更多相关文章

  1. React项目中 使用 CSS Module

    安装react-app-rewired 由于新的 react-app-rewired@2.x 版本的关系,还需要安装 customize-cra.但是我们这里不需要安装 react-app-rewir ...

  2. webpack项目在开发环境中使用静态css文件

    webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...

  3. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  4. create-react-app 构建的项目使用 css module 方式来书写 css

    先 yarn eject 释放出来配置文件具体参见我之前写过相关的文章(这里不再重复), 找到 config 文件夹下的文件如下图所示: 找到如图所示的配置: 书写 css 的文件名例如(App.mo ...

  5. 走近webpack(4)--css相关拓展

    我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...

  6. 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

    如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...

  7. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  8. css module

    来源:CSS Modules 用法教程 后面项目地址:https://github.com/947133297/lwj-webpack-demo 关键是打开这一行,表示开启loader的css mod ...

  9. 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

随机推荐

  1. HW2018校招软件类笔试题

    一. 1.题目 输入一个字符串,输出字符串中最长的数字串.如果有多个数字串长度相等且都是最长的,则按照字符串顺序输出最后一个最长的数字串. 2.解答 [code] import java.util.* ...

  2. ionic3 npm install cordova error syscall rename

    突然出现cordova 不是内部或外部命令,也不是可运行的程序或批处理文件. 可是之前cordova安装后一直用的好好的啊,后来尝试重新安装cordova 出现这个错误.也尝试重新安装了最新版本的no ...

  3. ZOJ Problem Set - 1730 Crazy Tea Party

    #include<cstdio> int main(){ int T,n; scanf("%d",&T); while(T--){ scanf("%d ...

  4. 静态和实例方法区别-java

    静态方法和实例方法的区别主要体现在两个方面:   在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这 ...

  5. 如何在优雅地Spring 中实现消息的发送和消费

    本文将对rocktmq-spring-boot的设计实现做一个简单的介绍,读者可以通过本文了解将RocketMQ Client端集成为spring-boot-starter框架的开发细节,然后通过一个 ...

  6. Python中的数据结构

    Python中的数据结构 这里总结一下Python中的内置数据结构(Built-in Data Structure):列表list.元组tuple.字典dict.集合set,涵盖的仅有部分重点,详细地 ...

  7. Docker在Linux上运行NetCore系列(二)把本地编译好的镜像发布到线上阿里云仓库

    转发请注明此文章作者与路径,请尊重原著,违者必究. 系列文章:https://www.cnblogs.com/alunchen/p/10121379.html 开始 本篇文章结束在本地创建完成镜像后, ...

  8. 基于stm32的水质监测系统项目基础部分详细记录

    基于stm32的水质监测系统项目基础部分详细记录 软件环境:MDK5 硬件环境:STM32F103ZET6 开发板.颜色传感器.串口屏.串口打印机 搭建工程模板 在进行项目软件的撰写时,首先新建一个基 ...

  9. axios 中文文档(转载)

    axios中文文档 转载来源:https://www.jianshu.com/p/7a9fbcbb1114 原始出处:lewis1990@amoy axios 基于promise用于浏览器和node. ...

  10. [android] 隐式意图激活另外一个activity

    随着api的升级,系统的很多应用包名和类名都改掉了,所以很多时候,打开系统应用的时候会报错,隐式意图就是解决组件之间松耦合,描述动作行为 获取Intent对象,通过new出来 调用Intent对象的s ...