1

The way my webpack is currently being set up, it places the css resources links in the head of the document, which blocks the rendering of my initial content.

Example:

<head>
   <link href="main.28396255e7678a2cdf3c.css" rel="stylesheet">
</head>

Therefore, I'd like to move them at the bottom of the document, right before </body>.

Is there a way to configure what I already have, to achieve this, or is there maybe a plugin I wasn't able to find?

Here's some of my webpack config:

{{
  entry: {
    app: [
      './styles/main.scss',
    ]
  },
  module: {
    rules: [
      {
        test: /main.scss$/,
        use: [
          {loader: MiniCssExtractPlugin.loader, options: {hmr: isActiveDevelopment}},
          'css-loader?sourceMap',
          {loader: 'postcss-loader', options: {sourceMap: true, ident: 'postcss', plugins: () => [postcssPresetEnv({browsers: 'last 20 versions'})]}},
          'sass-loader?sourceMap',
          'import-glob',
        ],
      },
    ]
  },
  plugins: removeEmpty([
    new MiniCssExtractPlugin({
      filename: ifOptimized('[name].[chunkhash].css', '[name].css'),
    }),
    new HtmlWebpackPlugin({
      template: './app.ejs',
      filename: indexHtml,
      chunksSortMode: (a, b) => scriptsOrder.indexOf(a.names[0]) > scriptsOrder.indexOf(b.names[0]),
      env: {isProd, isWeb, isHybrid},
      config: createConfig(ifWeb, ifHybrid, ifProd, ifDev)
    })
  ])
};

Here's my html(ejs) template, just in case:

<!DOCTYPE html>
<html lang="en" class="noOverflow">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <% if (htmlWebpackPlugin.options.env.isWeb) { %>
    <link rel="manifest" href="/manifest.json">
    <base href="/">
    <% } else if (htmlWebpackPlugin.options.env.isHybrid) { %>
    <script type="text/javascript" src="cordova.js"></script>
    <% } %>
</head>
<body>
<noscript>How do we put this.. Your browser does not support JavaScript o_O</noscript>
<% if (htmlWebpackPlugin.options.env.isWeb) { %>
<%- require('!html-loader!./splash/splash.html') %>
<% } %>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=cyrillic" rel="stylesheet">
<link rel="preload" href="<%- htmlWebpackPlugin.options.config.staticUrl %>/common/mk" as="fetch" type="application/json" crossorigin>
<link href="<%- htmlWebpackPlugin.files.chunks.app.css[0] %>" rel="stylesheet">
</body>
</html>
Daniel Birowsky Popeski
  • 8,752
  • 12
  • 60
  • 125
  • 1
    Such a transfer of all styles has a bad effect on the display of the page. Read more about the critical style, service worker with which you can cache files just like css, images, icons a many more -> [look](https://www.youtube.com/watch?v=_srJ7eHS3IM). You can use the **critical-webpack-plugin** to optimize css. The code which is not important to put using the **loadCSS** plugin and the link is placed in this way `` -> [look](https://stackoverflow.com/a/46750893/10424385) – Grzegorz T. Jul 12 '19 at 14:40
  • 1
    @GrzegorzT. can you link the **loadCSS** plugin you are referring to? – Daniel Birowsky Popeski Jul 12 '19 at 14:47
  • 1
    The last 'look' link directs to the place where it is described how to use it and a link to the plugin. – Grzegorz T. Jul 12 '19 at 14:49
  • 1
    @GrzegorzT. ideally, i would edit my webpack config to achieve what i need. [loadCss](https://github.com/filamentgroup/loadCSS) however, is not a webpack plugin, so it requires manual work. Are you aware of a webpack plugin encapsulating it? – Daniel Birowsky Popeski Jul 12 '19 at 14:53
  • 1
    See the documentation for [HtmlWebpackPlugin](https://github.com/jantimon/html-webpack-plugin#plugins) you have preload plugins, inline style and many more. – Grzegorz T. Jul 12 '19 at 15:02
  • it's highly recommended having link's in

    so you're loading the styles before the content.

     – SteinTheRuler Dec 26 '19 at 19:26

2 Answers2

1

First off, I'm curious about your intent. Based on the example code provided it looks like you're mainly concerned with just transpiling an SCSS file, and being able to place the result in an HTML file. If that's all you care about I'd suggest reading this article. There may be better articles out there, but it was ranked highest on Google, so there yuh go.

If your example code was trimmed down for brevity - or you just really want to use Webpack to transpile a single SCSS file - I'd suggest you read the documentation for the options of the plugin.

But based on your comment here, and the fact that you opened this issue, I'm getting the feeling you don't want to read the documentation - so, the inject property seems to be what you need to set to false.

true || 'head' || 'body' || false

Inject all assets into the given template or templateContent. When passing true or 'body' all javascript resources will be placed at the bottom of the body element. 'head' will place the scripts in the head element

An example of how to access the files when setting inject to false can be found here, in their examples folder.

theOneWhoKnocks
  • 600
  • 6
  • 13
  • Please refrain from speculations and focus on my query. I have no problem transpiling scss files. So I tried your suggestion, and passed `inject: false`, however that prevented any asset from being referenced in the `app.ejs` template. Do you have any other suggestion? – Daniel Birowsky Popeski Jul 14 '19 at 20:07
  • 1
    Doesn't seem you got my point. I wasn't speculating, I was suggesting a simpler solution for you if all you wanted to do was transpile SCSS (based on the code you provided for us). There are much simpler ways than using WP. At this point, your template seems fine, and based on the documentation, setting `true` or `body` should give you what you're asking for. That said, I'm led to believe there's something off somewhere else. I'd suggest you put together a simple repo demonstrating the issue. Then myself or others can more accurately troubleshoot the problem. Also, post your resulting HTML. – theOneWhoKnocks Jul 15 '19 at 02:28
  • For good measure, I added an extra line at the bottom of my original reply. – theOneWhoKnocks Jul 15 '19 at 02:44
0

for anyone searching, try this plugin, its puts your stylesheet at the bottom and puts the rel="preload" property

adrianjguerrero
  • 1
  • 1