Webpack html-loader 不能与 css-loader 一起工作

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

问题

我正在使用 Electron-Forge 和 Webpack 创建一个项目。我做了一些事情来向我的项目添加一个“public”目录，以及一个 html-loader 插件来解析 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样式没有出现：

糟糕的 CSS 样式

我的项目结构：

在此输入图片描述

尝试

首先，我检查 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，还是我的配置有问题。我把最相关的代码（也许？）放在上面，完整的项目可以在这里找到：https://github.com/iNKORE-NET/STARTER.ElectronForge.Vanilla/tree/4e189d6912474a5edf361ae94e4e80ac9328ea5e

我前几天才开始学习Electron，以前很少使用Webpack，所以我猜这是我的问题（？

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

您似乎无法让 

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.