同时编译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. 初识 go 语言:语法

    目录 语法 for 循环 if 语句 switch 语句 defer 语句 defer 栈 结束 前言: go语言系列第二篇,主要讲述go语言的语法,如循环,if判断,swich语句,defer语句, ...

  2. 团体程序设计天梯赛(CCCC) L3021 神坛 的一些错误做法(目前网上的方法没一个是对的) 和 一些想法

    团体程序设计天梯赛代码.体现代码技巧,比赛技巧.  https://github.com/congmingyige/cccc_code

  3. Unity 动画系统

    Legacy动画系统:Animation组件(旧) Mecanim动画系统:Animator组件(新) 动画播放过程: //动画片段 [System.Serializable] public clas ...

  4. jdbc增删改查进行封装

    jdbc封装 1 dao (代码分层) com.aaa.dao 存放dao相关的类型 例如 StudentDAOImpl 处理 数据库的链接 存取数据 com.aaa.servlet 存放servle ...

  5. CMDB资产管理系统开发【day26】:实现资产自动更新

    1.需求分析 1.比对分析 比对的时候以那个数据源为主? old [1,2,3 ] db数据库 new [2,3,4 ] 客户端汇报过来的 当然以客户端汇报过来的数据为主 2.更新分析 不同的表到底拿 ...

  6. 解决Java getResource 路径中含有中文的情况

    问题描述 当Java调用getResource方法,但是因为路径中含有中文时,得不到正确的路径 问题分析 编码转换问题 当我们使用ClassLoader的getResource方法获取路径时,获取到的 ...

  7. Makefile 使用总结(转)

    Makefile 使用总结  转自 https://www.cnblogs.com/wang_yb/p/3990952.html 1. Makefile 简介 Makefile 是和 make 命令一 ...

  8. Entity Framework入门教程(13)---EF中的高并发

    EF中的高并发 这里只介绍EF6中database-first开发方案的高并发解决方案,code-first开发方案中的高并发会在以后的EF CodeFirst系列中介绍. EF默认支持乐观并发:我们 ...

  9. 第三节: Quartz.Net五大构件之Scheduler(创建、封装、基本方法等)和Job(创建、关联等)

    一. 五大构件 引言: Quartz.Net的五大构件 1.  调度器:Scheduler 2.  作业任务:Job 3.  触发器: Trigger 4.  线程池: SimpleThreadPoo ...

  10. [译]Ocelot - Configuration

    原文 这里有一个配置的样例.配置主要有两个部分.一个是ReRoutes数组,另一个是GlobalConfiguration.ReRoute告诉Ocelot怎么处理上游的请求.Global config ...