同时使用antd和css module
同时编译antd和css module,需要设置两次less识别。
{
test: /\.less$/,
exclude: path.resolve(__dirname, './node_modules'),
use: extractTextPlugin.extract({ // 如果编译自己写的less,用css module, 就要过滤antd。
use: [{
loader: 'css-loader',
options: {
minimize: false,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'less-loader'
}
],
// use style-loader in development
fallback: 'style-loader'
})
},
{
test: /\.less$/,
include: path.resolve(__dirname, './node_modules'),
use: extractTextPlugin.extract({ // 如果编译antd的less,就要全局编译,不加css module。
use: [{
loader: 'css-loader'
},
{
loader: `less-loader?{"sourceMap":true,"modifyVars":${JSON.stringify(themer)}}`
}
],
fallback: 'style-loader'
})
}
同时使用antd和css module的更多相关文章
- react中antd+css Module一起使用
antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules. 使用 exclude 和 include 配置参考(https:/ ...
- Vue中scoped css和css module比较
scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </st ...
- webpack项目轻松混用css module
前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css mo ...
- 如使用Typescript撸Vue(Vue2 + TS +TSX+CSS module)
Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝.期待Vue3.0会用TS重构且会有较大改进.不过目前有一些第三方的库可以曲线优化对TS的支持.主要就介绍下过下面两个库来写Vue. 总 ...
- css module
来源:CSS Modules 用法教程 后面项目地址:https://github.com/947133297/lwj-webpack-demo 关键是打开这一行,表示开启loader的css mod ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- vue css module
步骤 module <style> -> <style module> class='header' -> :class='$style.header' <t ...
- create-react-app 构建的项目使用 css module 方式来书写 css
先 yarn eject 释放出来配置文件具体参见我之前写过相关的文章(这里不再重复), 找到 config 文件夹下的文件如下图所示: 找到如图所示的配置: 书写 css 的文件名例如(App.mo ...
- CSS Module解决全局或本地使用@keyframes无效问题
最近使用CSSModule开发react项目,遇到一个问题,使用@keyframes无效,问题如下 /** less + css module **/ :global { .effect-bottom ...
随机推荐
- 关于ehcache缓存中eternal及timeToLiveSeconds和timeToIdleSeconds的说明
今天发现开发项目启动时有警告提示:cache 'xx' is set to eternal but also has TTL/TTI set,发现是ehcache缓存设置冲突 所以决定在此mark一下 ...
- JS学习笔记Day12
一.浏览器的默认行为以及阻止行为 (一)右键菜单事件:oncontextmenu: 阻止:return false: (二)超链接的默认行为:跳转: 阻止:标准浏览器:event.preventDef ...
- SpringCloud笔记一:扫盲
目录 前言 什么是微服务? 微服务的优缺点是什么? 微服务之间是如何通讯的? SpringCloud和Dubbo有哪些区别? SpringCloud和SpringBoot的关系? 什么是服务熔断?什么 ...
- JN_0001:在微信朋友圈分享时长大于10s的视频
1,先在聊天窗口里发送视频. 2,长按视频点击”收藏“. 3,进入微信收藏管理页面,播放视频. 4,点击右上角三点按钮,选择“转存为笔记”. 5,于是在收藏页面中会生成一个新的收藏笔记链接,打开链接再 ...
- IP地址转为二进制,去掉0b补齐八位拼接,再转为十进制
#!/usr/bin/env python# -*- coding:utf-8 -*- ip = '192.168.0.1' # 转为二进制:# 方法一'''eve = ip.split('.')s ...
- HTML(八)HTML meta标签&base标签
HTML meta元素 标签(meta-information)用于提供页面有关的元数据,除了提供文档字符集.使用语言.作者等基本信息外,还涉及对关键词和网页等级的设定.通过设置不同的属性,元数据可以 ...
- IISExpress使用64位
C#有一些函数如GetHashCode和x86,X64版本有关系,为了和服务器保持一致,本地iis Express也需要设置64位. 方法如下,vs2010不支持. vs2012可以手动添加配置 re ...
- [物理学与PDEs]第2章第5节 一维流体力学方程组的 Lagrange 形式 5.2 Lagrange 坐标
1. Lagrange 坐标 $$\beex \bea &\quad 0=\int_\Omega\cfrac{\p \rho}{\p t}+\cfrac{\p}{\p x}(\rho u)\r ...
- java8 按对象属性值排序
//按id从小到大 List<User> sortUser = list.stream().sorted((u1, u2) -> u1.getId().compareTo(u2.ge ...
- Django-1-URL路由系统
一.分发地址 在APP中创建urls.py文件,将属于该APP的url地址都写入到这个文件中,当程序收到用户发送的请求时,先在根目录的urls.py文件中查找该地址属于哪个APP,将这个请求分发到该A ...