Vue.js 如何在生成的index.html文件中加载css文件？

使用

vue create.

命令创建了一个vue项目。我正在使用以下配置生成自己的index.html文件：

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

现在在index.html中如何链接css文件？我试着这样做，但不起作用

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

---

如何在href中加载正确的路径？

您需要这样设置条目javascript文件

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

并将您的根css文件导入到该js

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

webpack将识别css并将其注入到生成的html中。您还需要在config.rules中配置css加载程序

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

对他说“注射：身体”

new HtmlWebpackPlugin({
    inject: 'body'

---

这将导致js被注入到身体中，css将保留在头部

它注入到头部标记中，但在app.js文件初始化之后。我想直接在index.html中链接，以便在vue.js未被踢入之前，我可以显示我的自定义css规则。嗯，试着说他“inject:body”，如上所述。让我试着重新表述我的问题。我想在加载index.html后立即加载css文件。如果我使用上述方法，main.scss文件由main.jss连接到index.html，但javascript不会将任何css“挂钩”到index.html，当您将css/scss导入js时，它只是对一个网页包的提示，这是您制作css包的样式。如果您尝试上述方法，您将得到index.html，其中包含样式和js。因此，您可以在加载js之前使用样式进行布局。这就是你想要的吗？使用上述配置运行应用程序，并在main.js文件中设置警报。您将看到在注入该样式后出现第一个警报。我想要相反的结果。