create-react-app怎么按需引入antd和主题定制

最新推荐文章于 2024-09-25 08:09:11 发布

lmy233

最新推荐文章于 2024-09-25 08:09:11 发布

阅读量537

点赞数 1

分类专栏： react js 文章标签： react

本文链接：https://blog.csdn.net/weixin_43588821/article/details/109132285

版权

react 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

本文介绍如何通过 eject 曝光 webpack 配置来实现 Ant Design 的按需加载，并完成项目的主题定制。具体步骤包括安装必要的依赖、配置 package.json 和 webpack.config.js 文件等。

摘要由CSDN通过智能技术生成

第一步暴露配置：

yarn eject

第二步实现antd按需加载

yarn add babel-plugin-import

// 修改package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

第三步less引入

yarn add less less-loader -S-D

// 修改config目录下webpack.config.js文件
// 其实就是复制sass的配置修改成less
// 复制并添加**+**后面的内容

// style files regexes
+const lessRegex = /\.less$/;
+const lessModuleRegex = /\.module\.less$/;


// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass

+ {
+   test: lessRegex,
+   exclude: lessModuleRegex,
+   use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
+ },
+ // Adds support for CSS Modules, but using SASS
+ // using the extension .module.scss or .module.sass
+ {
+   test: lessModuleRegex,
+   use: getStyleLoaders(
+     {
+       importLoaders: 2,
+       modules: true,
+       getLocalIdent: getCSSModuleLocalIdent,
+     },
+     'less-loader'
+   ),
+ },

第四步主题定制

// 同样是config目录下webpack.config.js文件

//if (preProcessor) {
// ...
// }
if (preProcessor) {
+  let loader = require.resolve(preProcessor)
+  if (preProcessor === "less-loader") {
+  loader = {
+    loader,
+    options: {
+      modifyVars: { //自定义主题
+      'primary-color':' #1890ff ',
+    },
+    javascriptEnabled: true,
+  }
+ }
+ }
+ loaders.push(loader);
}
// 修改第二步package.json下的"style": "css"，改为"style": true

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

问题：在使用yarn eject暴露webpack配置后，再次使用yarn start 不能启动项目，显示缺少某包
解决：删除node-modules，使用npm或cnpm重新npm install

解答评论中的问题：

  // common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
          },
        }
      );
      let loader = require.resolve(preProcessor)
       if (preProcessor === "less-loader") {
         loader = {
           loader,
           options: {
             modifyVars: { //自定义主题
               'primary-color': '#006699',
               '@link-color': '#006699'
             },
             javascriptEnabled: true,
           }
         }
       }
       loaders.push(loader);
    }
    return loaders;
  };