同时编译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. [BOI2004]Sequence 数字序列(左偏树)

    PS:参考了黄源河的论文<左偏树的特点及其应用> 题目描述:给定一个整数序列\(a_1, a_2, - , a_n\),求一个递增序列\(b_1 < b_2 < - < ...

  2. CF55D Beautiful numbers

    题目链接 题意 定义一个数字\(x\)是\(beautiful\ number\)当且仅当\(x\)可以被其十进制表示下所有非\(0\)位置的数整除. 例如\(24\)是一个\(beautiful\ ...

  3. ComboBox下拉列表框

    属性:DropDownStyle(下拉.可编辑等).Items(条目) 事件:SelectedIndexChanged选择项改变触发 Items内容:总经理.副总经理.财务部 DropDownStyl ...

  4. python中的三元运算

    一.三元运算符 三元运算符就是在赋值变量的时候,可以直接加判断,然后赋值 格式:[on_true] if [expression] else [on_false] res = 值1 if 条件 els ...

  5. Oracle Database 10g安装

    前言 oracle_10g_32位的安装包 链接:https://pan.baidu.com/s/1v1ZWYSjWLzKo3GnDuV5nrg 密码:88yd PLSQL Developer 32位 ...

  6. Mybatis-generator自动生成器

    目录 前言牢骚 Mybatis-generator是什么? Mybatis-generator怎么使用? 第一步,Maven文件引用 第二步,数据库建立 第三步,写mybatis-generator. ...

  7. ACM-ICPC 2018 徐州赛区网络预赛 A Hard to prepare(递推)

    https://nanti.jisuanke.com/t/31453 题目 有n个格子拉成一个环,给你k,你能使用任意个数的0 ~ 2^k - 1,规定操作 i XNOR j 为~(i  ^  j), ...

  8. java(7)数组

    一.什么是数组及其作用? 定义:具有相同数据类型的一个集合 作用:存储连续的具有相同类型的数据 二.java中如何声明和定义数组 2.1 声明和定义的语法: 数据类型[ ] 数组名:( int[ ] ...

  9. Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC

    解决Invalid character found in the request target. The valid characters are defined in RFC 7230 and RF ...

  10. JQuery EasyUI 之 messager基本使用

    ♦ 基本语法:$.messager.alert ( title , msg , icon , fn ): 其中,icon有四种设置:"error"."info" ...