React引入AntD按需載入報錯

標籤：var   bezier   import   ase   fail   primary   with   eof   babel   

背景：React使用create-react-app腳手架建立，然後yarn run eject暴露了配置之後修改less配置，

需求：實現antd組件按需載入與修改主題。

一開始是按照webpack.config.dev.js檔案中的配置進行less的配置。

可以看到腳手架建立的config檔案為載入loader寫了一個公用方法，不是以前的webpack配置，所以仿照他的方式進行配置less檔案。

直接複製css的配置，修改成less的配置，然後yarn start重啟項目。

此時可以載入less檔案。

下面進行antd的按需載入與主題設定。

下載babel-plugin-import外掛程式，然後在plugins中添加配置

[    ‘import‘, {        "libraryName": ‘antd‘,         "style": true     }],

 

發現報錯

Failed to compile.

./node_modules/antd/lib/style/index.less (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js!./node_modules/antd/lib/style/index.less)

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

查看issue後加了一下代碼在lessloader裡面，仍然報錯

options: {    javascriptEnabled: true,    modifyVars: {         ‘primary-color‘: ‘red‘,    },},

其中“primary-color”是測試antd的自訂佈景主題的。

因為對自動產生的config檔案不熟悉，決定改用原來的less配置來對less檔案進行載入。

yarn start重啟項目之後，可以實現按需載入與定製主題。

{    test: /\.less$/,    //include: paths.appSrc,    use: [{        loader: "style-loader" // creates style nodes from JS strings    }, {         loader: "css-loader" // translates CSS into CommonJS    }, {        loader: "less-loader",// compiles Less to CSS        options: {            sourceMap: true,            modifyVars: {                ‘primary-color‘: ‘#1DA57A‘,                ‘link-color‘: ‘#1DA57A‘,                ‘border-radius-base‘: ‘2px‘,            },            javascriptEnabled: true,        }    }]},

主要原因還是對於webpack的配置不熟悉，得找時間好好研究一下！

如果沒有暴露配置，可以參考antd官方的配置進行按需載入與定製主題。詳見：在 create-react-app 中使用

React引入AntD按需載入報錯