首页 > 其他分享 >webpack css-loader模块化导致的antd样式不好用解决方案

webpack css-loader模块化导致的antd样式不好用解决方案

时间:2022-08-31 20:24:23浏览次数:95  
标签:node less 模块化 modules loader webpack antd css

css-loader 模块化会导致 antd 样式文件无效,解决的方式就是排除 node_modules 下的目标文件就可以
如果你用的 less 就可以按以下方式来配置

{
  test: /\.less$/,
  include: /node_modules/, // node_modules 下的 less 文件不使用模块化
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  ],
},
{
  test: /\.less$/,
  exclude: /node_modules/, //  其它文件下的 less 文件正常使用模块化
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
      options: {
        // 开启css模块化
        modules: {
          namedExport: false,
          localIdentName: '[path][name]-[local]--[hash:base64:5]',
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  ],
},

标签:node,less,模块化,modules,loader,webpack,antd,css
From: https://www.cnblogs.com/brotheryang/p/16644410.html

相关文章

  • Antd之No Data转换为中文
    Antd默认的暂无数据是英文的,如下图表格所示。修改的方法为:使用a-config-provider1.在App.vue增加a-config-provider,包装显示的页面<template><a-config-provider......
  • React + Antd实现动态切换主题功能
    本文摘自【前端早茶】React+Antd实现动态切换主题功能前言最近去antdesign官网查阅资料,发现antdesign最新版本已经更新到了4.17.x,于是比较粗略的看了一下最近几......
  • webPack安装
    WebPack:全局安装:安装到npm默认的依赖包目录在任意目录执行:npminstall-gwebpack或cnpminstall-gwebpack本地安装:安装指定应用程序目录......
  • VUE3.0+Antdv+Asp.net WebApi开发学生信息管理系统(完)
    在B/S系统开发中,前后端分离开发设计已成为一种标准,而VUE作为前端三大主流框架之一,越来越受到大家的青睐,Antdv是Antd在Vue中的实现。本系列文章主要通过Antdv和Asp.netWebA......
  • 带有getResource()示例的Spring Resource loader
    @AutowiredResourceLoaderresourceLoader;Resourceresource=resourceLoader.getResource("file:c:\\testing.txt");Resourceresource=resourceLoader.getReso......
  • webpack打包分析webpack-bundle-analyzer 打包文件分析工具
    最近需要减少项目打包后的文件(bundle)的大小,那么首先需要了解bundle的构成。目前我已知的方法有两种:利用webpack-bundle-analyzer插件利用webpack官方提供的分析功能......
  • webpack5 中使用iframe 复用导航栏时js代码多次编译问题
    作为webpack萌新,在使用webpack时,偶然发现热更新了多次,最开始以为是配置问题,网上找了很久都没有答案,无意看见一个一个帖子说多引用了一遍js文件,于是我我回去找代码看是不是......
  • Bootloader
    什么是bootloader?   首先我们都知道操作系统(作为一个程序)必须要运行在内存中。但究竟操作系统是如何跑到内存中的呢?CPU在出厂设置的时候会内置一段代码,这段代码用于......
  • DevTools 无法加载来源映射:无法加载 webpack··· net::ERR_UNKNOWN_URL_SCHEME
    问题:DevTools无法加载来源映射:无法加载webpack:///node_modules/element-plus/es/components/notification/src/notification.mjs.map的内容:Fetchthroughtargetfaile......
  • webpack4.15.1 学习笔记(九) — 最最基础的插件使用
    目录html-webpack-pluginclean-webpack-pluginwebpack-manifest-pluginHotModuleReplacementPlugin(内置)处理webpack在编译过程中的某个特定任务的功能模块,plugins选......