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

【问题标题】：How to have Babel in Webpack ignore .less files如何让 Webpack 中的 Babel 忽略 .less 文件
【发布时间】：2016-07-30 01:07:03
【问题描述】：

我正在尝试直接从 node_modules 加载较少的文件，特别是“react-widgets”库。我按照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。这是有效的 Less，所以我很确定它是 Babel 干扰，但我不确定如何让它忽略我的 .less 文件。

这是我的 webpack 配置

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]" },
    ]
  }
};

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

我还应该尝试什么？

【问题讨论】：

标签： reactjs less ecmascript-6 webpack

【解决方案1】：

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

【讨论】：

【解决方案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 配置中：

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

来自less-loadergithub page：

webpack 提供了一种高级机制来解析文件。 less-loader 存根less' fileLoader 并将所有查询传递给 webpack 解析引擎。因此，您可以从 node_modules 导入您的 less-modules。只需在它们前面加上一个 ~ 告诉 webpack 查找 modulesDirectories
@import "~bootstrap/less/bootstrap";

【讨论】：