如何使用 webpack 从 npm 依赖项编译 .less 文件？答案

【问题标题】：How to compile .less files from an npm dependency using webpack?如何使用 webpack 从 npm 依赖项编译 .less 文件？
【发布时间】：2016-01-28 17:56:26
【问题描述】：

我正在使用 npm 模块 elemental，其中包含一个 /less 文件夹，其中包含所有相关样式用于其 react ui。我目前正在尝试使用less-loader：

/tasks/config/webpack.js:

'use strict';

let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function(grunt) {

  grunt.config.set('webpack', {
    client: {
      entry: {
        app: `${process.cwd()}/src/app.jsx`,
      },
      output: {
        filename: '[name].js',
        chunkFilename: '[id].js',
        path: `${process.cwd()}/dist`,
      },
      module: {
        loaders: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components|dist)/,
            loader: 'babel',
            query: {
              presets: ['react', 'es2015'],
            },
          },
          {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
          },
        ],
      },
      plugins: [
        new ExtractTextPlugin('[name].css'),
      ],
    },
  });

  grunt.loadNpmTasks('grunt-webpack');

};

/src/app.jsx:

'use strict';

let path = require('path');

require(path.resolve(process.cwd(), 'node_modules/elemental/less/elemental.less'));

但这似乎不起作用，因为它会产生警告：

WARNING in ./src/app.jsx
Critical dependencies:
5:0-82 the request of a dependency is an expression
 @ ./src/app.jsx 5:0-82

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

我将此解释为您不能使用包含来自node_modules 内部的文件的require()s。

编辑

请注意，任何地方都没有.css文件输出，/dist/app.js的输出也不能正常工作。

【问题讨论】：

为什么不试试写require('elemental/less/elemental.less');？
@DmitryYaremenko 这行得通！谢谢！

标签： node.js reactjs gruntjs less webpack

【解决方案1】：

为什么不试试写 require('elemental/less/elemental.less'); 呢？

在您的错误消息中：“5:0-82 依赖项的请求是一个表达式”。

【讨论】：