同时使用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 ...
随机推荐
- Spring中的AOP 专题
Caused by: java.lang.IllegalArgumentException: ProceedingJoinPoint is only supported for around advi ...
- Vue(二)简单入门
根据上一节搭建的hello-world工程(包含Router),用Webstorm打开,我们先运行一下工程. 界面如下 .. 我将在About里面介绍一下Vue的相关内容. 打开About.vue,修 ...
- 金融量化分析【day110】:Pandas-DataFrame索引和切片
一.实验文档准备 1.安装 tushare pip install tushare 2.启动ipython C:\Users\Administrator>ipython Python 3.7.0 ...
- flyway和liquibase的使用样例
在代码上我们有svn和git等诸多的版本控制方法. 但是在数据库上却没有相应的工具.一度导致多环境见的数据库同步难以维持. flyway和liquibase都是常见的数据库版本控制工具. flyway ...
- PyQt5之布局管理
目录 一 写在开头 1.1 本文内容 二 绝对布局 三 布局类 3.1 水平布局(QHBoxLayout)和垂直布局(QVBoxLayout) 3.2 水平布局和垂直布局实例 3.3 网格布局(QGr ...
- 微信小程序传递参数(字符串、数组、对象)
[转自燕歆波]感谢! //通过提供的JSON.stingify方法,将对象转换成字符串后传递 click:function(e){ var model = JSON.stringify(e.curre ...
- EF的三种数据加载方式
EF的关联实体加载有三种方式:Lazy Loading,Eager Loading,Explicit Loading,其中Lazy Loading和Explicit Loading都是延迟加载. (一 ...
- 帆软报表(finereport) 折叠树
在进行展现数据时,希望模板的数据是可以动态折叠的,即点击数据前面的加号才展开对应下面的数据,可通过树节点按钮实现折叠树效果 实现思路: 1.这里建立一个内置数据集 添加数据 设置模板样式,添加颜色和对 ...
- Django-瀑布流
1.通过ajax方式实现滚动条瀑布流(1)创建数据库:xixi\pubu\models.py from django.db import models #Img图片表 class Img(models ...
- 如何查询oracle数据库中的各种角色
1. 查询oracle中所有用户信息select * from dba_users;2. 只查询用户和密码select username,password from dba_users;3. 查询当前 ...