webpack项目轻松混用css module的方法


Posted in Javascript onJune 12, 2018

前言

本文讲述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-loader、css-loader和style-loader依次处理。

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

二、初步改进

使用exclude和include进行区分

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.用文件名区分两种模式

  1. *.global.css 普通模式
  2. *.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]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery移动listbox的值原理及代码
May 03 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 #Javascript
用vue快速开发app的脚手架工具
Jun 11 #Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 #Javascript
vue非父子组件通信问题及解决方法
Jun 11 #Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 #Javascript
详解.vue文件解析的实现
Jun 11 #Javascript
vue filters的使用详解
Jun 11 #Javascript
You might like
开发大型 PHP 项目的方法
2007/01/02 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
js实现日历
2020/11/07 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python编程嵌套函数实例代码
2018/02/11 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
EJB面试题
2015/07/28 面试题
教师节商场活动方案
2014/02/13 职场文书
中班中秋节活动反思
2014/02/18 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
年终考核实施方案
2014/05/26 职场文书
公务员个人考察材料
2014/12/23 职场文书
党员转正介绍人意见
2015/06/03 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript