Question

我正在尝试直接从node_modules加载较少的文件，特别是＆＃39; react-widgets＆＃39;图书馆。我按照their site的指示设置了一个非常简单的示例，转换为basic template。令我沮丧的是，我收到以下错误消息：

 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)

它在文件开头抱怨@import。这是有效的，所以我很确定它的Babel会干扰，但我不确定如何让它忽略我的.less文件。

这是我的webpack配置

＆＃13;

require('react-widgets/lib/less/react-widgets.less')

module.exports = {
  entry: './index',
  output: {
    filename: 'browser-bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
      { test: /\.gif$/, loader: "url-loader?mimetype=image/png" },
      { test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader?name=[name].[ext]" },
    ]
  }
};

＆＃13;

我尝试过类似的SO回复，但仍然让我摸不着头脑。

我还应该尝试什么？

Answer 1

问题是如果那是你的webpack配置，你就不能在其中require('react-widgets/lib/less/react-widgets.less')。这是在某个组件内部。

Answer 2

这实际上与babel无关，而且与webpack本身有关。您遇到的问题是您尝试在webpack配置文件中要求/导入.less文件。这显然不会起作用，因为这不是webpack的设计方式。您的webpack.config.js文件中没有任何内容可以归结为客户端，它意味着配置应用程序代码的构建方式。

由于您已配置less-loader，因此您需要移动该行：

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

从webpack.config.js开始进入您的入口点（在这种情况下为./index.js）。

（我在下面保留了原来的答案）。

（原始答案）

您不想忽略它们，您希望使用less-loader处理它们。这会将它们编译为有效的css，然后你可以使用样式加载器将它们加载到文档中：

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

然后在webpack config中：

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

来自less-loader github page：

webpack提供了一种解决文件的高级机制。较少的装载器存根较少＆＃39; fileLoader并将所有查询传递给webpack解析引擎。因此，您可以从node_modules导入较少的模块。只需在它们前面添加一个〜，告诉webpack查找modulesDirectories

@import "~bootstrap/less/bootstrap";

如何让Webpack中的Babel忽略.less文件

2 个答案: