同时编译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. OI中卡常数技巧

    一.I/O优化 读入优化是卡常数最重要的一条! inline int read() { ,f=;char c=getchar(); ;c=getchar();} +c-';c=getchar();} ...

  2. Tomcat设计模式

    omcat 系统架构与设计模式,第 2 部分 设计模式分析 系列内容: 此内容是该系列 2 部分中的第 2 部分: Tomcat 系统架构与设计模式 门面设计模式 门面设计模式在 Tomcat 中有多 ...

  3. Java WebService接口生成和调用 图文详解>【转】【待调整】

    webservice简介: Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范实施的应用之间 ...

  4. JDBC 关闭数据库连接与自动提交【转】

    // Jdbc关闭数据库连接时,会隐含一个提交事务的操作 private final static String DB_DRIVER = "oracle.jdbc.driver.Oracle ...

  5. HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...

  6. mysql/mariadb主从复制

    主从复制简介 MySQL数据库的主从复制方案,是其自带的功能,并且主从复制并不是复制磁盘上的数据库文件,而是通过binlog日志复制到需要同步的从服务器上. MySQL数据库支持单向.双向.链式级联, ...

  7. [物理学与PDEs]第1章第6节 电磁场的标势与矢势 6.2 电磁场的标势与矢势

    1.  标势.矢势:  $$\beex \bea \Div{\bf B}=0&\ra \exists\ {\bf A},\st {\bf B}=\rot{\bf A},\\ \rot{\bf ...

  8. [物理学与PDEs]第1章第4节 电磁能量和电磁动量, 能量、动量守恒与转化定律 4.3 电磁能量 (动量) 密度, 电磁能量流 (动量流) 密度

    1. 电磁能量密度: $\cfrac{1}{2}\sex{\ve_0E^2+\cfrac{1}{\mu_0}B^2}$. 2. 电磁能量流密度向量: ${\bf S}=\cfrac{1}{\mu_0} ...

  9. 【codeforces 765F】Souvenirs

    Description Artsem is on vacation and wants to buy souvenirs for his two teammates. There are n souv ...

  10. 第30月第6天 git log

    1. git log git log 96a6f18b1e0a1b7301cb4f350537d947afeb22bc -p -1 我们常用 -p 选项展开显示每次提交的内容差异,用 -2 则仅显示最 ...