同时编译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的更多相关文章

  1. react中antd+css Module一起使用

    antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules. 使用 exclude 和 include 配置参考(https:/ ...

  2. Vue中scoped css和css module比较

    scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </st ...

  3. webpack项目轻松混用css module

    前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css mo ...

  4. 如使用Typescript撸Vue(Vue2 + TS +TSX+CSS module)

    Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝.期待Vue3.0会用TS重构且会有较大改进.不过目前有一些第三方的库可以曲线优化对TS的支持.主要就介绍下过下面两个库来写Vue. 总 ...

  5. css module

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

  6. [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  ...

  7. vue css module

    步骤 module <style> -> <style module> class='header' -> :class='$style.header' <t ...

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

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

  9. CSS Module解决全局或本地使用@keyframes无效问题

    最近使用CSSModule开发react项目,遇到一个问题,使用@keyframes无效,问题如下 /** less + css module **/ :global { .effect-bottom ...

随机推荐

  1. LoadRunner【第二篇】原理及使用流程

    loadrunner工作原理 性能测试只关注底层数据,不关注业务,不关注客户端动作.所以,脚本运行正确不一定业务就正确(业务是否正确,如果是查询,我们可以通过检查点来判断:如果是增删改操作,可以看通过 ...

  2. 计算机网络--差错检测(帧检验序列FCS计算方法)

    我们知道数据链路层广泛使用循环冗余检验CRC的检验技术 现在我们知道要发送的数据M=101001(长度为k=6)  在我们每次发送数据的时候需要在M后面添加一个N位的冗余码,一共发送(k+N)位数据 ...

  3. GitBook插件整理 - book.json配置

    目录 1. 配置概况 1.1. 全局配置 1.2. 插件列表 plugins 1.3. 插件属性配置pluginsConfig 2. 一些实用插件 2.1. back-to-top-button 回到 ...

  4. Ubuntu 服务器上面--安装和配置mysql 【转】

    更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入root用户的密码"--> ...

  5. 缓存服务—Redis

    Redis 简介Redis 是一个开源(BSD 许可)的.内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 为什么要用 Redis 在高并发场景下,如果需要经常连接结果变动频繁的数据库, ...

  6. 时间序列函数resamlpe详解

    resample与groupby的区别:resample:在给定的时间单位内重取样groupby:对给定的数据条目进行统计 函数原型:DataFrame.resample(rule, how=None ...

  7. spring cloud(学习笔记)高可用注册中心(Eureka)的实现(一)

    最近在学习的时候,发现微服务架构中,假如只有一个注册中心,那这个注册中心挂了可怎么办,这样的系统,既不安全,稳定性也不好,网上和书上找了一会,发现这个spring cloud早就想到了,并帮我们解决了 ...

  8. Eclipse中的sysout与debug-遁地龙卷风

    (-1)调试 在读<<一个程序员的奋斗史>>时里面提到这是一件很low的事情,突然想到自己也一直用sysout, 我是一个有情怀的人! (0)sysout的坏处 之所以长久的使 ...

  9. iTOP-开发板-MiniLinux-C程序调用shell命令

    本文档介绍的是在 linux 系统环境下 linux-C 调用 shell 命令实验步骤,和文档压缩包一起的“iTOP-开发板-MiniLinux-SHELL_V1.0.zip”是 c 程序源码.Li ...

  10. Qt websocket

    1.pro  添加 QT += websockets #ifndef MYWEBSOCKETSERVER_H #define MYWEBSOCKETSERVER_H #include <QObj ...