1

I need to inject a Stylus bundle into the html file in webpack config file.

I already inject the js bundle using HtmlWebpackPlugin and I thought that it was possible to inject a compiled stylus bundle using this plugin too.

Below is my current webpack.config.js file:

var HtmlWebpackPlugin = require('html-webpack-plugin');

var HtmlWebpackPluginConfigForJS = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});
var HtmlWebpackPluginConfigForStyles = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.styl',
    inject: 'head'
});

module.exports = {
    entry: [
        'babel-polyfill',
        './app/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    devtool: 'source-map',
    cache: true,
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader'
            },
            {
                test: /\.styl$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'style-loader!css-loader!stylus-loader'
            }
        ]
    },
    plugins: [
        HtmlWebpackPluginConfigForJS,
        HtmlWebpackPluginConfigForStyles
    ],
    stylus: {
        use: [require('nib')(), require('rupture')()],
        import: ['~nib/lib/nib/index.styl', '~rupture/rupture/index.styl']
    }
}

The only way I got the styles work was to add require('./index.styl); in my javascript file, but this is not what I need.

HtmlWebpackPluginConfigForJS works fine and successfuly injects the index_bundle.js file in my index.html. But it doesn't work with the styles.

Could you please help me to improve my webpack config to make it inject my stylus bundle correctly?

4

1 回答 1

1

默认情况下css，HtmlWebpackPlugin 从文档中注入文件：

如果您在 webpack 的输出中有任何 css 资源（例如，使用 ExtractTextPlugin 提取的 css），那么这些资源将包含在 HTML 头部的标签中。

因此，您可以使用ExtractTextPlugin将所有样式提取到一个或多个文件中。但是要提取你应该需要你index.styl的 mainindex.js以便加载程序可以看到并进行提取。

于 2016-04-22T09:34:32.430 回答