如何使用webpack从npm依赖关系编译.less文件?

我正在使用npm模块elemental ,它包含一个/less文件夹以及所有相关样式的反应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()

编辑

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

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

在你的错误信息:“5:0-82依赖的请求是一个expression式 ”。