如何使用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式 ”。
- nodejs gruntsubprocesscallback函数的例子
- Grunt不会启动:“>> ReferenceError:grunt没有定义”
- 使用grunt-contrib-connect和grunt-connect-rewrite删除文件扩展名
- 在CloudControl中部署基于grunt的应用程序
- Grunt给出了一个奇怪的“WARN:ERROR:Unexpected token …”消息
- Gruntjs观看不同的文件夹并执行任务
- 前端开发工作stream程
- 如何debugging从Visual Studio代码中的Grunt运行茉莉花testing?
- 如何修改基于文件更改的grunt watch任务?