标签：index 自定义 less ts start craco build antd

1：使用croco管理antd主题配置

yarn add @craco/craco
yarn add craco-less

2：修改package.json文件

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

3：src/index.css文件改为src/index.less,然后修改样式引用为 less 文件。

 src/index.tsx

- import './index.css';
+ import './index.less';

 src/index.less

- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

4：然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

修改主题样式

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。修改后重启 yarn start.

标签：index,自定义,less,ts,start,craco,build,antd
来源： https://blog.csdn.net/he_wen_jian/article/details/113678932

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。