我正在尝试将一个现有项目的构建系统从
目前它有一个单一入口的.less文件,它会导入其他各种文件,如下所示:
这将写出一个包含所有 .less 文件的单个 css 文件。它使用 https://github.com/just-boris/less-plugin-glob 来允许使用通配符。
在 Webpack 中,我试图使用
我正在尝试像这样引入我的“entry” less 文件:
gulp
迁移到webpack
。目前它有一个单一入口的.less文件,它会导入其他各种文件,如下所示:
@import 'bower_components/bootstrap/less/bootstrap.less';
@import 'components/**/*.less';
这将写出一个包含所有 .less 文件的单个 css 文件。它使用 https://github.com/just-boris/less-plugin-glob 来允许使用通配符。
在 Webpack 中,我试图使用
less-loader
、css-loader
和 style-loader
的组合来实现相同的功能。我的 webpack 配置中的 modules
部分如下:var lessPluginGlob = require('less-plugin-glob');
...
{
test: /\.less$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'less-loader', options: { lessPlugins: [lessPluginGlob] }}
]
},
我正在尝试像这样引入我的“entry” less 文件:
require('./app.less');
但无论我做什么,都会得到这个:
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'
请问有人能指点我正确的方向吗?