Next.js 使用Antd less样式报错问题解决

何种问题？

在next.js项目导入antd的less样式时，出现如下问题：

Failed to compile
./node_modules/antd/dist/antd.lessModule build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):// https://github.com/ant-design/ant-motion/issues/44.bezierEasingMixin();^Inline JavaScript is not enabled. Is it set in your options? in D:\project\pb\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0) at <anonymous>

这个在7927# issue中有解答。原因是less3.0之后，默认不开启内联JavaScript，需要传入{ javascriptEnabled:true }手动开启。参阅：
https://github.com/ant-design/ant-design/issues/7927#

在哪传入？

相信很多人很大概率卡在这个问题上，答：
因为用cli工具搭建的项目，webpack配置都内建在cli中而非暴露在项目里，在next.config.js中追踪withLess方法，可以看到配置：

withLess入口

解决方法：

将 { javascriptEnabled : true }传入lessLoaderOptions即可覆盖默认webpack配置：

const withLess = require('@zeit/next-less')

module.exports = withLess({
  lessLoaderOptions : {
    javascriptEnabled : true
  }
})