react 項目中使用less，以及支持裝飾器語法模式配置craco.config.js配置

一、需要安裝的依賴

1. 如果需要使用antd則先執行： 

　　yarn add antd

2. 安裝craco

       yarn add @craco/craco

3. 安裝less插件

       yarn add  craco-less

4. 安裝裝飾器語法支持插件

      yarn add @babel/plugin-proposal-decorators

 

二、在項目中引入antd樣式，修改稿package.json文件

在 App.css文件頂部antd.css文件    @import '~antd/dist/antd.css';

引入之后就可以在需要使用antd組件的文件中一如組件使用了；

package.json

 

 

 

三、 在根目錄想創建 craco.config.js文件添加相關配置

// 使用less插件
const CracoLessPlugin = require('craco-less');

module.exports = {
    plugins: [
        {
          plugin: CracoLessPlugin,
          options: {
            lessLoaderOptions: {
              lessOptions: {
                  // 修改主題色 
                  modifyVars: { '@primary-color': '#1DA57A' },
                  javascriptEnabled: true,
              },
            },
          },
        },
    ],
    babel:{
        // 支持裝飾器模式語法
        plugins: [
          ["@babel/plugin-proposal-decorators", { legacy: true }]
        ]
    }
} 

四、重啟項目