Question

使用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中加载正确的路径？

Answer 1

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

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

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

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

webpack将识别该CSS，并将注入结果html中。您还需要在config.rules中配置css loader

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

说他“注射：身体”

new HtmlWebpackPlugin({
    inject: 'body'

这将导致js注入体内，而CSS将保留在头部

如何在生成的index.html文件中加载CSS文件？

1 个答案: