同时使用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 ...
随机推荐
- LoadRunner【第一篇】下载、安装、破解
loadrunner11下载 loadrunner11大小有4g多,相对另外一款开源的性能测试工具jmeter来说,是非常笨重的了,网上很多,大家可以搜索,也可以点击右侧加群获取安装包. loadru ...
- FreeNAS插件打造ownCloud私有云网盘
ownCloud 是一个自由开源的个人云存储解决方案,可以自由获取无需付费,但用户需要自行架设服务器,好在FreeNAS可以通过插件轻松的构建ownCloud服务器. ownCloud 分为服务器端和 ...
- vue---mixins的用法
相信大家都用过less.sass等预编译器.它们中也有mixins,用法也很简单,例如Less中: .box{ border:1px solid red; padding:10px; } .mixin ...
- <六>企业级开源仓库nexus3实战应用–使用nexus3配置yum私有仓库
一两个星期之前,你如果在我跟前说起私服的事情,我大概会绕着你走,因为我对这个东西真的一窍不通.事实上也正如此,开发同学曾不止一次的跟我说公司的私服版本太旧了,许多新的依赖编译之后不会从远程仓库自动缓存 ...
- host-only局域网络
在网桥配置的情况下设置: 网桥配置链接 配置前: 配置后: vi /etc/sysconfig/network-scripts/ifcfg-eth0 这里是使用static静态配置,具体网络配置及声明 ...
- docker系列(1)- 配置
参考自:https://www.jianshu.com/p/81bf5efff8e0
- [物理学与PDEs]第2章习题11 Lagrange 形式的一维理想流体力学方程组在强间断线上的间断连接条件
对由第 10 题给出的 Lagrange 形式的一维理想流体力学方程组, 给出解在强间断线上应满足的间断连接条件 (假设体积力 $F\equiv 0$). 解答: $$\beex \bea \sez{ ...
- luogu P5300 [GXOI/GZOI2019]与或和
传送门 题目涉及按位与以及按位或运算,所以可以拆位考虑,枚举某个二进制位,然后某个位置如果那个数的第\(i\)位是\(0\)就放\(0\),否则放\(1\),这一位的贡献就是位运算后值为\(1\)的子 ...
- Luogu P4321 随机漫游
期望DP要倒着推 Luogu P4321 题意 LOJ #2542 不一定是树,询问点不一定均为1 $Solution$ 设计一个巧妙的DP状态 设$ F(S,x)$表示当前在点$ x$已经走遍了$ ...
- Django 多数据库支持
很多时候,需要去其他数据库查询数据,都将会面临多数据库支持问题. 1.在settings文件内添加多数据库连接 DATABASES = { 'default': { 'ENGINE': 'django ...