使用react-vite-antd，修改antd主題，報錯 [vite] Internal server error: Inline JavaScript is not enabled. Is it set in your options? It is hacky way to make this function will be compiled preferentially by less

一般報錯

 

 

 

在官方文檔中，沒有關於vite中如何使用自定義主題的相關配置，經過查閱

1.安裝less  yarn add less （已經安裝了就不必再安裝）

2.首先將App.css改成App.less,記得將app.ts（或者.tsx/.js）中的引入更改為 import "./App.less";

3.在App.less中，將原先引入的@import 'antd/dist/antd.css' 更改為 @import 'antd/dist/antd.less';

4.在vite.config.ts(.js)中進行修改

vite 2X

export default defineConfig({
   css:{
      preprocessorOptions:{
        less:{
          javascriptEnabled: true,  //注意，這一句是在less對象中，寫在外邊不起作用
          modifyVars:{ //在這里進行主題的修改，參考官方配置屬性
            '@primary-color': '#1DA57A',
          },
        }
      }
    },

})

vite 1X

export default{
    cssPreprocessOptions:{
          less:{

               javascriptEnabled:true
          }
    }

}

 

然后刷新或者重啟就好了