ant-design-pro 中如何直接使用css文件

如果你想快速搭建后台管理项目，可以直接使用ant-design-pro。
线上demo链接：
https://v2-preview-ant-design-pro.netlify.app/dashboard/analysis
官方网站：https://pro.ant.design/index-cn

代码展示

直接使用ant-design-pro项目代码，只能引用.less文件。如果您想直接引用.css文件需要在config.ts文件中，添加context.resourcePath.includes(’.css’) || 代码。
代码位置看代码片
代码片.

// An highlighted block
cssLoaderOptions: {
    modules: true,
    getLocalIdent: (
      context: {
        resourcePath: string;
      },
      _: string,
      localName: string
    ) => {
      if (
        context.resourcePath.includes("node_modules") ||
        
           // 添加下面一行代码
        context.resourcePath.includes('.css') ||
        
        context.resourcePath.includes("ant.design.pro.less") ||
        context.resourcePath.includes("global.less")
      ) {
        return localName;
      }

      const match = context.resourcePath.match(/src(.*)/);

      if (match && match[1]) {
        const antdProPath = match[1].replace(".less", "");
        const arr = slash(antdProPath)
          .split("/")
          .map((a: string) => a.replace(/([A-Z])/g, "-$1"))
          .map((a: string) => a.toLowerCase());
        return `antd-pro${arr.join("-")}-${localName}`.replace(/--/g, "-");
      }

      return localName;
    }
  };

使用.css文件

如果你在config.ts文件中已经添加上面代码，就可以直接在组件中直接应用使用
import from './inde.css

附言

如果您找不到config.ts文件，可以直接用vscode右侧🔍，搜索代码关键字或文件名获得