Html-webpack-plugin: How to add styles

Created on 2 Dec 2014 · 6Comments · Source: jantimon/html-webpack-plugin

  module: {
    loaders: [
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style", "css!sass")
        },


plugins: [
    new ExtractTextPlugin("style.[hash].css", {
        allChunks: true
    }),
    new HtmlWebpackPlugin({
        template: 'src/client/index.html',
        "assets": {
            "client" : "client.[hash].js",
            "style"  : "style.[hash].css",
        }
    })
]

template:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>My App</title>
  </head>
  <body>
    <link href="{%=o.htmlWebpackPlugin.assets.style%}" media="all" rel="stylesheet" type="text/css">
    <script src="{%=o.htmlWebpackPlugin.assets.client%}"></script>
  </body>
</html>

Source

bitplanets

Most helpful comment

I think this could use some more explicit documentation. Especially in the use case of multiple chunks going to the the head and/or body.

IronSean on 26 Jan 2018

👍3

All 6 comments

try:

<link rel="stylesheet" href="[prepend_your_public_path/]{%=o.webpack.assetsByChunkName.client[1]%}">

more details here: https://github.com/ampedandwired/html-webpack-plugin/issues/1

mateatslc on 19 Jan 2015

👎5

Thanks @bitplanets, some good ideas there, and apologies for not getting back to you sooner. I'm going to put a bit of work into making this a bit easier, as well as addressing the script ordering problem.