👑 [需求] 可以不引入 @import '~antd/es/style/themes/default.less'; 吗？因为会覆盖项目中的样式

[mtrucc]

🥰 需求描述

emmm，公司内部基于antd自己封装了组件库，然后引入可编辑表格组件的时候会对样式产生影响

🧐 解决方案

将你的工程直接引进来，然后一点点改。。但是后续的维护和迭代就不方便了

🚑 其他信息

[mtrucc]

emmm，我想着是不是可以传入参数，按需引入样式？这个感觉改动比较大

[mtrucc]

• additionaldata 各位我解决了，可以用这个方法去判断是不是antd文件，然后取消对antd的less文件的引入。

              additionalData: (content, loaderContext) => {
                // 更多可用的属性见 https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.less") {
                  return "@value: 100px;" + content;
                }

                return "@value: 200px;" + content;
              },

[Astra-RX]

@chenshuai2144 这个我建议 pro-components 还是处理一下，取消对样式的默认引入，像 antd 一样手动引入。目前这样，主题实际上无法通过 less 变量自定义，hack 也太不方便了。

[Astra-RX]

在 dumi 的 .umirc.ts 尝试配置了，并没有生效

lessLoader: {
  additionalData: (content, loaderContext) => {
    // 更多可用的属性见 https://webpack.js.org/api/loaders/
    const { resourcePath, rootContext } = loaderContext;
    const relativePath = path.relative(rootContext, resourcePath);
    console.log(resourcePath)

    if (/@ant-design\/pro-form\/lib\/index.less/.test(resourcePath)) {
      return ''
    } else {
      return content
    }
  },
},

console 上加了断点，debug 启动编译时也不会在断点中断，目测是配置没有执行，但并列的 modifyVars 项生效了 dumi@^1.1.23

[dimsky]

@chenshuai2144 这个我建议 pro-components 还是处理一下，取消对样式的默认引入，像 antd 一样手动引入。目前这样，主题实际上无法通过 less 变量自定义，hack 也太不方便了。

+1

[Wang-yubo]

@chenshuai2144 这个我建议 pro-components 还是处理一下，取消对样式的默认引入，像 antd 一样手动引入。目前这样，主题实际上无法通过 less 变量自定义，hack 也太不方便了。

• additionaldata 各位我解决了，可以用这个方法去判断是不是antd文件，然后取消对antd的less文件的引入。

              additionalData: (content, loaderContext) => {
                // 更多可用的属性见 https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.less") {
                  return "@value: 100px;" + content;
                }

                return "@value: 200px;" + content;
              },

楼主能贴一下你这里的配置嘛？我也用了但是没生效~~

[LolipopJ]

对于 Umi 3.x 项目，可以这样解决：

yarn add -D babel-plugin-transform-remove-imports

通过 babel 插件 transform-remove-imports 移除 @ant-design/* 中组件对 antd 样式的引入：

// config/config.ts
import path from 'path';

return {
  extraBabelIncludes: [
    // 仅处理 @ant-design 目录下的依赖库
    path.resolve('/node_modules/@ant-design'),
  ],
  extraBabelPlugins: [
    [
      'transform-remove-imports',
      {
        test: /(.*)antd\/es\/(.*)\/style(.*)/,
      },
      'antd-style-clear',
    ],
  ],
}