Reactjs 如何让Babel在网页中忽略.less文件

我正试图直接从node_模块加载较少的文件，特别是“react widgets”库。我建立了一个非常简单的例子，按照从，到。令我沮丧的是，我收到了以下错误消息：

 D:\GitHub\react-webpack-template\node_modules\react-widgets\lib\less\react-widgets.less:1
 (function (exports, require, module, __filename, __dirname) { @import "./variables.less";
                                                               ^
 SyntaxError: Unexpected token ILLEGAL
 at Object.exports.runInThisContext (vm.js:53:16)
 at Module._compile (module.js:513:28)
 at Object.Module._extensions..js (module.js:550:10)
 at Module.load (module.js:458:32)
 at tryModuleLoad (module.js:417:12)
 at Function.Module._load (module.js:409:3)
 at Module.require (module.js:468:17)
 at require (internal/module.js:20:19)
 at Object.<anonymous> (D:\GitHub\react-webpack-template\webpack.config.js:4:1)
 at Module._compile (module.js:541:32)

---

这实际上与巴贝尔无关，一切都与网页包本身有关。您遇到的问题是，您试图在网页包配置文件中要求/导入

.less

文件。这种简单的设计是行不通的，因为网页包不是这样设计的。

webpack.config.js

文件中的任何内容都不能将其归结为客户端，它旨在配置应用程序代码的构建方式

由于您已经配置了

较少的加载程序

，因此需要移动该行：

require('react-widgets/lib/less/react-widgets.less')

从

webpack.config.js

进入您的入口点（

/index.js

）

（我保留了下面的原始答案）

---

（原答覆）

您不希望忽略它们，而是希望使用较少的加载程序来处理它们。这将把它们编译成有效的css，然后您可以使用样式加载器将它们加载到文档中：

$ npm install --save-dev less less-loader css-loader style-loader

然后在网页包配置中：

loaders: [
    { test: /\.less$/, loader: 'style!css!less' }
]

从

较少的加载程序
：

webpack提供了一种高级的文件解析机制。less加载器存根less文件加载器，并将所有查询传递给Web包解析引擎。因此，您可以从节点_模块导入较少的模块。只需在它们前面加一个~，告诉webpack查找模块目录

@import "~bootstrap/less/bootstrap";

问题是，如果这是你的网页配置，你不能
在里面要求（'react-widgets/lib/less/react-widgets.less'）
。它位于某个组件的内部