将 css 文件捆绑为链接标签不起作用答案

【问题标题】：Bundling css files as linktag doesn't work将 css 文件捆绑为链接标签不起作用
【发布时间】：2020-07-07 01:35:19
【问题描述】：

我在 webpack 中使用 sass-loader 和 style-loader 加载 css 和 scss 文件，如下所示：

test: /\.scss$/,
    use: [
        { loader: 'style-loader' },
        {
            loader: 'css-loader',
            options: {
                url: false,
                modules: false
            }
        },
        { loader: 'sass-loader' }
    ]

一切正常，除了它们都放在我不喜欢的标签中。我想改用“linkTag”选项。因此，我添加了该选项，其余代码保持原样：

在我看来 .cshtml 文件中，我加载了捆绑的 js 文件，它是 webpack 的输出（此代码与之前没有 lingTag 选项的代码相同，然后它就可以工作了）：

@Scripts.Render("~/app/dist/homepagecss.js")

现在打开应用程序后，我发现 URL 太大并且服务器错误。正在发生的事情是，它打开内部代码并尝试将其作为服务器调用执行。我不明白为什么会这样，我错过了什么吗？

【问题讨论】：

标签： css webpack sass

【解决方案1】：

我设法使用extract-loader 和file-loader 让它工作：

{
    test: /style\.css$/i,
    use: [{ loader: "style-loader", options: { injectType: "linkTag"} },
        "file-loader",
        "extract-loader",
        "css-loader",
        "sass-loader"
    ],
},

【讨论】：