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

Question

我试图直接从node_modules加载较少的文件,特别是'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)

它抱怨文件开头的@import.这是有效的,所以我很确定它是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回复,我试过,但仍然让我挠头.

• 试图使用ExtractTextPlugin
• 在babelrc文件中忽略.less

我还应该尝试什么？

Answer 1

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