美文网首页
Next.js 使用Antd less样式报错问题解决

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

作者: Kagashino | 来源:发表于2018-11-13 20:23 被阅读0次

何种问题?

在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
  }
})

相关文章

网友评论

      本文标题:Next.js 使用Antd less样式报错问题解决

      本文链接:https://www.haomeiwen.com/subject/sdfrfqtx.html