External embedded css in index.html missing after docker build

I have a Vue/Webpack application that uses an external-referencing, embedded CSS link in my index.html file. It looks something like:

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
    />
   ...
  </head>

If I run npm run build in the project directory, the resulting dist/index.html file will contain this link.

However, I am deploying my project in a Docker container. At the end of that container building process, this CSS link and others like it will be gone in the generated index.html file, causing several elements on my page to break graphically.

What settings in the webpack/Docker config could cause this to happen?



Read more here: https://stackoverflow.com/questions/68092850/external-embedded-css-in-index-html-missing-after-docker-build

Content Attribution

This content was originally published by Jos at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: