时间戳

首页 > 解决方案 > 电子不加载 CSS 文件

javascript - 电子不加载 CSS 文件

问题描述

我正在尝试在电子中加载一个 css 文件。我发现其他人有相关问题，他们的解决方案并没有为我解决问题。当我打开我的开发工具时，它说：

Failed to load resource: net::ERR_FILE_NOT_FOUND index.css:1

当我将鼠标悬停在 index.css 上时，它实际上确实显示了正确的文件位置，它说：

file///C:/Users/myusername/myproject/src/assets/css/index.css

此文件路径与我的 css 文件的路径 100% 正确对应。我的代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>My Project</title>
  <link rel="stylesheet" href="assets/ccs/index.css">
</head>

<body>
  <h1>This is just the beginning</h1>
  Great things to come
  <script src="../renderer.js"></script>
</body>

</html>

我已经尝试将链接更改为 href="./assets/css/index.css" 以及“/assets/css/index.css”，但没有改变任何内容。

和js代码：

const { app, BrowserWindow } = require('electron')
const path = require('path')

let mainWindow

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
        nodeIntegration: true,
        enableRemoteModule: true,
        preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('src/index.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

我一直在看这个几个小时，找不到问题所在，代码基于电子的入门指南，所以我认为它会起作用。如果有人可以在这里帮助我，我将不胜感激！

编辑：我的文件结构树

+-- src
|   +-- assets
|        +-- css
|             +--index.css
|   +-- index.html
+-- index.js
+-- package-lock.json
+-- package.json
+-- preload.json
+-- renderer.json

标签： javascriptcssnode.jselectronelectron-builder

解决方案

推荐阅读