How to load a css file in generated index.html file?

Question

Created a vue project using vue create . command. I am generating my own index.html file using the following configs:

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,    
}),

Now in index.html how I can link a css file? I tried like this but its not working

<link rel="stylesheet" href="~@/assets/custom/styles.css">

How to load the correct path in href?

Andrey · Accepted Answer · 2020-06-29 09:22:47Z

1

you need to setup entry javascript file like that

config.entry = {
 mainJs: 'main.js'
}

and import your root css file to that js.

import '../css/main.scss';

webpack will recognize that css and will inject into resulting html. you need to configure css loader in config.rules as well

    config.module = {
        rules: [
...
{
            test: /\.css$/,
            use: [
                DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
            ],
        }
        ]

say him 'inject: body'

new HtmlWebpackPlugin({
    inject: 'body'

that will lead to js being injected into body, and css will remain in head

edited Jun 29, 2020 at 9:22

answered Jun 29, 2020 at 8:10

Andrey

2,23822 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

coure2011 Over a year ago

it injects into head tag but after the app.js file is initialized. I want to link in index.html directly so that until the vue.js is not kicked in I can show my custom css rules.

Andrey Over a year ago

hm, try to say him 'inject: body', like as above

coure2011 Over a year ago

Let me try to rephrase my problem. I want to load a css file as soon as the index.html is loaded. If I use the above approach main.scss file is hooked into index.html by the main.js

Andrey Over a year ago

But javascript does not 'hook' any css into index.html, when you import css/scss into js it is just a hint for a webpack, that here is your styles to make css bundle from. If you try the approach above, you will get index.html with styles inside <head> and with js inside <body>. So you can have layout with your styles before js gets loaded. Is that what you want?

coure2011 Over a year ago

Run the app with above configuration and set an alert in main.js file. You will see first alert is appearing after that style is injected. I want the opposite.

Collectives™ on Stack Overflow

How to load a css file in generated index.html file?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related