首页 > 其他分享 >css模块化导致antd引入无效的问题

css模块化导致antd引入无效的问题

时间:2022-10-21 19:36:32浏览次数:62  
标签:__ resolve .. 模块化 loader path antd css

我用的是webpack5,在react18中配置css module后导致antd全局样式失效,这时候可以考虑css单独配置不用模块化,less也单独有一套自己的配置,启用模块化,less用于业务代码,css用于第三方代码,配置如下:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
//把css从JS中单独提取做压缩
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//把文件复制到打包后的指定位置
const CopyPlugin = require("copy-webpack-plugin");
const isDev = process.env.NODE_ENV == "dev";

// CSS是加載 第三方的CSS,比如antd,less是業務的css,這樣就可以避免CSS模塊化對antd引入后讓antd無效的問題
module.exports = {
  entry: {
    main: path.resolve(__dirname, "../src/main.tsx"), //key就是文件输出的命名
  },
  output: {
    filename: "[name].[chunkhash:8].bundle.js", //key+哈希组成的名字
    chunkFilename: "[name].[chunkhash:8].js", //key+哈希组成的名字,针对的是懒加载文件,例如react.lazy导入的文件
    path: path.resolve(__dirname, "../dist"),
    clean: true,
    assetModuleFilename: "../src/assets/imgs/[name][ext]", //绝对路径会报错,就是不要path.resolve(__dirname, ".."),这么写
  },
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "../src"),
      "@components": path.resolve(__dirname, "../src/components"),
    },
    extensions: [".js", ".jsx", ".json", ".tsx", ".ts"], //表示这几个的后缀名可省略,webpack打包的时候看到这种省略后缀名的文件会先从这个集合中匹配
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "thread-loader",
          },
          {
            loader: "babel-loader",
            options: {
              presets: [isDev && "@babel/preset-env"].filter(Boolean),
            },
          },
        ],
      },
      {
        test: /\.(tsx|ts)?$/,
        use: ["ts-loader"], //thread-loader不能和ts-loader一起用,会不兼容而报错
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [
          // MiniCssExtractPlugin和style-loader只能存在一个,两个都有会出document is not defined的错误,style-loader是提取样式插入到styleMiniCssExtractPlugin是提取样式到新的一个文件用link的方式引入,不支持热更新,需要手动刷新
          isDev
            ? {
                loader: "style-loader",
              }
            : {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  esModule: false, //默认是es6的模块方式,浏览器上没响应,要声明为false
                },
              },
          {
            loader: "css-loader",
            options: {
              sourceMap: false,
              importLoaders: 1,
            },
          },
          "postcss-loader",
        ],
      },
      {
        test: /\.css$/,
        // 排除业务模块,其他模块都不采用css modules方式解析
        exclude: [/src/],
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        exclude: /node_modules/,
        use: [
          // MiniCssExtractPlugin和style-loader只能存在一个,两个都有会出document is not defined的错误,style-loader是提取样式插入到styleMiniCssExtractPlugin是提取样式到新的一个文件用link的方式引入,不支持热更新,需要手动刷新
          isDev
            ? {
                loader: "style-loader",
              }
            : {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  esModule: false, //默认是es6的模块方式,浏览器上没响应,要声明为false
                },
              },
          {
            loader: "css-loader",
            options: {
              sourceMap: false,
              // modules: true,
              modules: {
                localIdentName: "css__module__[name]__[local][chunkhash:8]", //加个css__module__前缀,防止purgecss-webpack-plugin打包的时候给排除了
              },
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                strictMath: true,
              },
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/, // 匹配媒体文件
        type: "asset", // type选择asset
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb转base64位
          },
        },
      },
    ],
  },
  plugins: [
    //本插件会将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。
    !isDev &&
      new MiniCssExtractPlugin({
        filename: "[name].css", //key+哈希组成的名字
      }),
    new HtmlWebpackPlugin({
      title: "llc-stage",
      template: path.resolve(__dirname, "../public/index.html"),
      // favicon: 'public/favicon.ico'
    }),
    //拷贝指定文件夹原样打包到指定目录
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "../src/assets/imgs"),
          to: path.resolve(__dirname, "../dist/src/assets/imgs"),
        },
      ],
    }),
  ].filter(Boolean),

  // 开启webpack持久化存储缓存
  cache: {
    type: "filesystem", // 使用文件缓存
  },
};

问题解决

标签:__,resolve,..,模块化,loader,path,antd,css
From: https://www.cnblogs.com/llcdbk/p/16814560.html

相关文章

  • HTML-案例-注册页面,CSS-概述
    HTML-案例-注册页面<!--定义表单from,post:获取#号--><formaction="#"method="post"><!--边框1集中,宽度500--><tableborder="1"align="center"width......
  • 纯css星空效果
    vue2版的<!--*@Description:星空*@Autor:赵婧*@Date:2022-09-0717:27:44*@LastEditors:赵婧*@LastEditTime:2022-10-2110:17:58--><template>......
  • antdv CheckableTag 动态显示
    exportinterfacedata{checked:boolean,label:string,}<templatev-for="(item,index)inlabelItems":key="index"><CheckableTagv-......
  • CSS字体显示设置
    CSS字体显示设置宋体:SimSun黑体:SimHei微软雅黑:MicrosoftYaHei微软正黑体:MicrosoftJhengHei新宋体:NSimSun新细明体:PMingLiU细明体:MingLiU标楷体:DFKai-SB仿宋:Fang......
  • maven模块化开发
    看geoserver源码时,心中有一个疑惑,就是这么多模块是如何进行管理的呢?geoserver中使用了哪些Java设计模式?为什么使用Maven多模块?参考:https://blog.csdn.net/bakelFF/article......
  • 雪碧图CSS Sprite
    CSSSprite也叫CSS精灵图,或者CSS雪碧图,是一种网页图片应用处理方式。它允许你讲一个页面涉及到的所有的小图标(或其他图)包含到一张大图。当前的问题虽然每个小图标或者小图片......
  • css 写 >箭头
    .area-input{position:relative;.at-input__container::after{content:"";height:18px;width:18px;top:36px......
  • CSS:img被hover的时候改变src图片路径
    mg的src可以通过content改变鼠标hover时的图片路径<imgclass="import_imgcreate"src="@/assets/add_icon.png"alt=""/>.titleButton:hover.create{content:u......
  • 前端开发日常——CSS动画无限轮播
    近来没有什么值得写的东西,空闲的时候帮前端的同学做了些大屏上的展示模块,就放在这里写写吧,手把手“需求->设计->实现”,受众偏新手向。为了直观便于理解,直......
  • selenium元素定位之css选择器和xpath
    CSS选择器(cssselector)作用:用于定位页面上的标签元素的,找到符合选择器的标签元素,然后应用样式。语句:dr.find_element_by_css_selector("CSS选择器")——根据CSS选择器......