react之通俗易懂配置less

最新推荐文章于 2023-01-24 10:13:24 发布

疯狂的编程

最新推荐文章于 2023-01-24 10:13:24 发布

阅读量641

点赞数 2

分类专栏： react 文章标签： less reactjs javascript webpack 前端

本文链接：https://blog.csdn.net/qq_38262409/article/details/105470281

版权

本文介绍了在创建React应用后，如何配置less-loader解决@import antd样式时的错误。通过分析webpack.config.js和官网代码，利用展开运算符正确传递less-loader配置，最终成功导入并实现了antd样式的按需加载。

摘要由CSDN通过智能技术生成

使用create-react-app构建react项目之后，配置less-loader，配置完了后，正常引入less没问题，但是@import "~antd/dist/antd.less"还是会报错：

问题：

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?

查看代码片段（webpack.config.js）：

// less
{
     test: lessRegex,
     exclude: lessModuleRegex,

     use: getStyleLoaders({
          importLoaders: 3,
          sourceMap: isEnvProduction && shouldUseSourceMap,