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?