[英]How to compile .less files from an npm dependency using webpack?
I'm using the npm module elemental
, which contains a /less
folder with all the relevant styling for its react ui. 我正在使用npm模块
elemental
,其中包含一个/less
文件夹,该文件夹具有react ui的所有相关样式。 I'm currently trying to do this with less-loader
: 我目前正在尝试使用
less-loader
来做到这一点:
/tasks/config/webpack.js
: /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
: /src/app.jsx
:
'use strict';
let path = require('path');
require(path.resolve(process.cwd(), 'node_modules/elemental/less/elemental.less'));
But this doesn't seem to work, as it generates a warning: 但这似乎不起作用,因为它会生成警告:
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 ^\.\/.*$
I'm interpreting this to mean that you can't use require()
s that include files from inside node_modules
. 我将其解释为您不能使用包含来自
node_modules
内部文件的require()
。
Just to note, there are no .css
files output anywhere, nor does the output /dist/app.js
work properly. 请注意,任何地方都没有输出
.css
文件,输出/dist/app.js
也/dist/app.js
正常工作。
Why not try just write require('elemental/less/elemental.less');
为什么不尝试只写
require('elemental/less/elemental.less');
? ?
In your error message: "5:0-82 the request of a dependency is an expression ". 在您的错误消息中:“ 5:0-82依赖项的请求是一个表达式 ”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.