在 Webpack 中使用 less-plugin-glob [英] Using less-plugin-glob with Webpack
问题描述
我正在尝试将现有项目的构建系统从 gulp
迁移到 webpack
.
I am trying to migrate the build system for an existing project from gulp
to webpack
.
它目前有一个单一的入口点 .less 文件,它可以导入各种其他文件,如下所示:
It currently has a single entry point .less file which imports various other files as follows:
@import 'bower_components/bootstrap/less/bootstrap.less';
@import 'components/**/*.less';
这会写出一个包含所有找到的 .less 文件的 css 文件.它使用 https://github.com/just-boris/less-plugin-glob 允许 globs.
This writes out a single css file which includes all of the .less files found. It uses https://github.com/just-boris/less-plugin-glob to allow globs.
在 Webpack 中,我尝试使用 less-loader
、css-loader
和 style-loader
的组合达到同样的目的.我的 webpack 配置的 modules
部分如下所示:
Over in Webpack I have got as far as trying to use a combination of less-loader
, css-loader
and style-loader
to achieve the same thing. The modules
part of my webpack config looks like this:
var lessPluginGlob = require('less-plugin-glob');
...
{
test: /\.less$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'less-loader', options: { lessPlugins: [lessPluginGlob] }}
]
},
而且我正在尝试要求我的条目"较少的文件,如下所示:
and I am trying to require my "entry" less file like so:
require('./app.less');
但无论我做什么我都会得到这个:
but no matter what I do I get this:
ERROR in ./~/css-loader?{"importLoaders":1}!./~/less-loader?{"lessPlugins":[{}]}!./app/app.less
Module build failed: Can't resolve './components/**/*.less' in '/Users/matt/web-app/app'
有人能指出我正确的方向吗?
Can anyone please point me in the right direction?
推荐答案
我已经做到了:
...
{
loader: 'less-loader',
options: {
paths: [
path.resolve(path.join(__dirname, 'app'))
],
plugins: [
require('less-plugin-glob')
]
}
}
查看源代码:https://github.com/webpack-contrib/less-loader/blob/master/src/getOptions.js#L22
我不知道这是否是预期行为,但如果未指定 paths
,则 createWebpackLessPlugin
在 less-plugin-glob
之前首先执行代码>插件.它会抛出一个错误,因为 createWebpackLessPlugin
对下一个插件一无所知.
I don't know whether it's an intendend behaviour, but if paths
is not specified createWebpackLessPlugin
being executed first, before less-plugin-glob
plugin. And it throws an error since createWebpackLessPlugin
knows nothing about next plugins.
所以我的解决方案只是指定 paths
以使 less-plugin-glob
首先被执行.
So my solution was simply to specify paths
to make less-plugin-glob
being executed first.
工作示例:https://github.com/notagency/webpack2-with-less-plugin-glob
这篇关于在 Webpack 中使用 less-plugin-glob的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!