Webpack HTML 加载器不能与 CSS 加载器一起工作

问题描述 投票：0回答：1

问题

我正在使用 Electron Forge 和 webpack 创建一个项目。我在我的项目中添加了一个“公共”目录，以及一个 HTML 加载器插件来解析 HTML 文件中的导入。

我的webpack配置的一些部分如下：

export const rules: Required<ModuleOptions>["rules"] = 
[
    // Add support for native node modules
    {
        // We're specifying native_modules in the test because the asset relocator loader generates a
        // "fake" .node file which is really a cjs file.
        test: /native_modules[/\\].+\.node$/,
        use: "node-loader",
    },
    {
        test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
        parser: { amd: false },
        use: 
        {
            loader: "@vercel/webpack-asset-relocator-loader",
            options: 
            {
                outputAssetBase: "native_modules",
            },
        },
    },
    {
        test: /\.tsx?$/,
        exclude: /(node_modules|\.webpack)/,
        use: {
            loader: "ts-loader",
            options: 
            {
                transpileOnly: true,
            },
        },
    },

    {
        test: /\.(png|jpe?g|gif|svg|ico|woff|woff2|ttf|otf|eot|mp4|webm|mp3|wav|pdf|txt)$/,
        type: "asset/resource",
        generator:
        {
            filename: "assets/[hash][ext][query]",
        }
    },

    {
        test: /\.(htm|html)$/,
        use: 
        [{
            loader: "html-loader",
        }],
    },
];

export const alias =
{
    "source": path.resolve(__dirname, "source"),
    "public": path.resolve(__dirname, "public")
}

然后我尝试直接从 HTML 导入 CSS 文件，如下所示：

<head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>

但是 CSS 样式没有出现：Bad CSS styles

我的项目结构

尝试

我检查了 DevTools，HTML 如下所示：

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="/29125ef8bd79b19044b6.css">
    <script defer="" src="/main_window/index.js"></script>
</head>

然后我转到'/29125ef8bd79b19044b6.css'，而不是CSS代码，我看到了一些意想不到的东西：

import API from "!../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
import domAPI from "!../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/style-loader/dist/runtime/styleDomAPI.js";
import insertFn from "!../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/style-loader/dist/runtime/insertBySelector.js";
import setAttributes from "!../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js";
import insertStyleElement from "!../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/style-loader/dist/runtime/insertStyleElement.js";
import styleTagTransformFn from "!../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/style-loader/dist/runtime/styleTagTransform.js";
import content, * as namedExport from "!!../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js!./index.css";

var options = {};

options.styleTagTransform = styleTagTransformFn;
options.setAttributes = setAttributes;
options.insert = insertFn.bind(null, "head");
options.domAPI = domAPI;
options.insertStyleElement = insertStyleElement;

var update = API(content, options);

export * from "!!../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js!./index.css";
export default content && content.locals ? content.locals : undefined;

可疑的 CSS 文件

我不知道这是 webpack、Electron Forge 或者他们的插件的 bug，还是我的配置有问题。完整的项目可在 GitHub 上获取。

css webpack electron electron-forge webpack-html-loader
1个回答
-7
投票

您似乎无法让 

html-loader
和 
css-loader
在 Webpack 配置中协同工作。此问题通常与 Webpack 设置中的加载器配置方式有关。以下是帮助解决问题的分步指南：

  1. 确保正确安装：首先，确保安装了必要的加载程序。如果您想将 CSS 注入到 DOM 中，您应该拥有 

    html-loader
    和 
    css-loader
    ，以及 
    style-loader
    。您可以使用以下方式安装它们：

    npm install html-loader css-loader style-loader --save-dev

  2. 配置 Webpack：您的 Webpack 配置应包含处理 HTML 和 CSS 文件的规则。这是一个基本示例：

    const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: 'html-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

    在此配置中：

    • html-loader
      处理 HTML 文件。
    • css-loader
      解释 CSS 文件中的 
      @import
      和 
      url()
      。
    • style-loader
      将 CSS 注入 DOM。

  3. 验证 HTML 和 CSS 导入：确保您的 HTML 和 CSS 文件已正确导入到 JavaScript 或 TypeScript 文件中。例如：

    import './styles.css';
import './index.html';

  4. 检查 Webpack 版本兼容性：确保 

    html-loader
    、
    css-loader
    和 
    style-loader
    的版本与您的 Webpack 版本兼容。有时，版本不匹配可能会导致问题。

  5. 调试：如果上述步骤无法解决问题，请尝试添加 

    console.log
    语句或使用 Webpack 的详细日志记录来排除可能出现问题的位置。

按照这些步骤操作，您应该能够让 

html-loader
和 
css-loader
一起工作。如果您仍然遇到问题，请提供有关您的 Webpack 配置以及您遇到的任何错误消息的更多详细信息。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.