我试图用webpack生成一个css文件。
我的app {css是用extract-text-webpack-plugin
创建的,很好地将我的所有css文件捆绑成一个。
问题的出现是因为我们使用google-fonts-webpack-plugin
来下载字体并创建包含字体的css块。
我的猜测是extract-text-webpack-plugin
只添加了加载ExtractTextPlugin.extract
的文件,而且因为字体块不是实际的css文件,所以它不会包含它。
CommonsChunkPlugin
也没有帮助。
我也尝试过使用merge-files-webpack-plugin
打破AFAIK,因为块不是来自文件。
const webpackConf = {
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
})
}
],
},
plugins: [
new ExtractTextPlugin({
filename: 'app.css',
allChunks: true
}),
new GoogleFontsPlugin({
name: 'fonts',
fonts: [
{ family: 'Titillium Web', variants: ['400', '600', '700'] },
{ family: 'Roboto Condensed', variants: ['400'] }
]
}),
]
};
我们如何创建包含应用和字体的单个css文件?