在Webpack中使用less-plugin-glob

我在嘗試將現有項目的構建系統從gulp遷移到webpack。在Webpack中使用less-plugin-glob

它目前擁有其中進口各種其他文件如下一個單一入口點.LESS文件：

@import 'bower_components/bootstrap/less/bootstrap.less'; 
@import 'components/**/*.less';

此寫出一個CSS文件，其中包括找到的所有.LESS文件。它使用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] }} 
    ] 
},

，我想要求我的「入口」少的文件，像這樣：

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'

任何人都可以請我指出正確的方向嗎？

來源

2017-03-06 Matt Wilson

嗨，我有同樣的問題http://stackoverflow.com/questions/43527423/webpack-import-multiple-less-files-using-glob-expressions。你有沒有想出一個解決方案到目前爲止？ –

恐怕不是@Semih Gk。 - 最後我列出了這些文件，並認爲我稍後再回來... –

謝謝@Math Wilson。那麼，到目前爲止我找不到一個好的解決方案，但我至少找到了一個方法。你可以考慮它，除非你找到更好的。我把它發佈在我的問題下面。 –

我做它像這樣工作：

... 
{ 
    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

我不知道它是否是一個intendend的行爲，但如果paths未指定createWebpackLessPlugin存在先執行less-plugin-glob插件。它會拋出一個錯誤，因爲createWebpackLessPlugin對下一個插件一無所知。

所以我的解決方案只是指定paths使less-plugin-glob首先被執行。

工作例如：https://github.com/notagency/webpack2-with-less-plugin-glob

來源

2017-04-25 22:20:56

在Webpack中使用less-plugin-glob

回答

相關問題