React项目eject后使用less和antd遇到的问题

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

草莓大花猪

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

阅读量532

点赞数

文章标签： react less

本文链接：https://blog.youkuaiyun.com/m0_49431369/article/details/121498806

版权

一. 使用less编写样式和less全局变量

-下载依赖包，导出配置文件

npm install --save less less-loader
npm install --save-dev style-resources-loader // less全局变量
npm run eject

找到config文件夹下webpack.config.js文件

// 在60行左右添加less正则匹配
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// 在550行左右,sass配置的下面添加less处理配置
// 改配置模仿sass配置
{
  test: lessRegex,
    exclude: cssModuleRegex,
      use: [
        ...getStyleLoaders(
          {
            importLoaders: 3,
            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment,
          },
          'less-loader'
        ),
        {
          loader: 'style-resources-loader',
          options: {
          	// 全局变量文件路径
            patterns: path.resolve(__dirname, '../src/assets/css/baseVariable.less'),
          },
        },
      ],
        sideEffects: true,
},
{
  test: lessModuleRegex,
    use: [
      ...getStyleLoaders(
        {
          importLoaders: 3,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
          modules: {
            getLocalIdent: getCSSModuleLocalIdent,
          },
        },
        'less-loader'
      ),
      {
        loader: 'style-resources-loader',
        options: {
          // 全局变量文件路径
          patterns: path.resolve(__dirname, '../src/assets/css/baseVariable.less'),
        },
      },
    ],
},

详细过程参考链接 React配置less以及less的全局变量设置

二. antd按需引入和主题自定义

官网提供了相关的方法，但是在eject后官网方法不在生效会引起错误

解决方法

检查项目是否引入babel-plugin-import包，没有则引入，然后修改package.json文件，实现了按需引入

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

定制主题需修改webpack.config.js文件

// 引入
const { getThemeVariables } = require('antd/dist/theme');
// 在150行左右
if (preProcessor) {
     loaders.push(
       {
         loader: require.resolve('resolve-url-loader'),
         options: {
           sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
           root: paths.appSrc,
         },
       },
       {
         loader: require.resolve(preProcessor),
         options: {
           sourceMap: true,
           // 定制主题--自己添加
           lessOptions: preProcessor === 'less-loader' ? {
             modifyVars: getThemeVariables({
               dark: true, // 开启暗黑模式
               compact: true, // 开启紧凑模式
             }),
             javascriptEnabled: true,
           } : null
           // 添加结束
         },
       }
     );