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

user_277696 0
Viewed 1220

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?

html-webpack-plugin vue.js webpack
1 Answers

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

user_59345670
Related