Having trouble getting the loader to work with webpack assets produced by Vue.js

[dkmorgan]

This topic may possibly be a duplicate of #41 but I didn't want to hijack the thread. I am experiencing difficulties in trying to get the loader to work with webpack assets produced by Vue.js (@vue/cli 4.5.12).

My vue.config.js file is as follows:

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const {WebpackManifestPlugin} = require('webpack-manifest-plugin');

module.exports = {
    configureWebpack: {
        plugins: [
            new CleanWebpackPlugin(),
            new WebpackManifestPlugin({ publicPath: "" })
        ]
    },
    productionSourceMap: false,
    transpileDependencies: [
        'vuetify'
    ]
};

The generated manifest.json is as follows:

{
  "app.css": "css/app.7a4272b1.css",
  "app.js": "js/app.1ddd4c01.js",
  "chunk-vendors.css": "css/chunk-vendors.24611a9a.css",
  "chunk-vendors.js": "js/chunk-vendors.33990123.js",
  "favicon.ico": "favicon.ico",
  "index.html": "index.html"
}

The django template correctly loads both of the javascript files, but the styling is completely lost and the UI is garbled.

If I add the following to vue.config.js:

    css: { extract: false },

The css files are no longer generated as separate files. The django template loads the javascript files and most of the styling is applied except for the fonts. The mdi icons used in the UI are also completely lost.

I have checked to see what the assets in the dist directory produce using serve -s dist which results in the correct styling for the fonts. The mdi icons are also present in the UI.

I would really appreciate any insight into what may be causing this or any pointers to what I could try to determine the problem.

[dkmorgan]

OK, the issue was due to my lack of knowledge and some further investigation. Regarding the styling, I had to add the following to the django template:

{% manifest_match '*.css' '<link rel="stylesheet" type="text/css" href="{match}">' %}

And regarding the mdi icons, I had to include the material design icon library in my Vue.js project. I still have a minor issue where the font text differs (letters are stretched out) from when the web page is served through serve -s dist, but hopefully I can resolve this with some more investigation.

This topic can be considered closed.