gpt4 book ai didi

javascript - 如何修复我的元素中未加载图像和 CSS?

转载 作者:行者123 更新时间:2023-11-28 00:32:59 25 4
gpt4 key购买 nike

我使用以下方式设置 JavaScript 开发环境。

https://channel9.msdn.com/Events/Seth-on-the-Road/Codemash-2017/Build-a-JavaScript-Development-Environment-in-30-minutes

我的 HTML 看起来像。 (很简单)

<html>
<head>
<style>
body {
background-image: url("weather.png");
background-repeat: repeat;
}
</style>

<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<h1>Hi All</h1>

</body>
</html>

图像和 CSS 都在同一个文件夹中。但是,内联 CSS 和外部 CSS 都不起作用。如果我把它放在简单的 HTML 文件中,它就可以工作,但是在 javascript dev env 之后;不工作。

以下是我在 package.json 中的依赖项。

"author": "",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.17.0",
"babel-loader": "6.2.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.16.0",
"eslint": "^5.12.1",
"eslint-loader": "^2.1.1",
"express": "^4.16.4",
"jest": "^23.6.0",
"npm-run-all": "^4.1.5",
"open": "0.0.5",
"style-loader": "0.13.1"
},
"eslintConfig": {
"extends": [
"eslint:recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"env": {
"browser": true,
"jest": true
},
"rules": {
"no-console": "off",
"no-debugger": "warn"
}
},
"babel": {
"presets": [
"latest"
]
}

我遇到如下错误:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/index.css"

以下是我的服务器文件。

import express from 'express';
import path from 'path';
import open from 'open';

const port = 3000;
const app = express();

app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.listen(port, function(err) {
if (err) {
console.log(err);
} else {
open('http://localhost:' + port);
}
});

最佳答案

我很困惑,因为你的 Webpack 没有使用 react。但无论如何,我知道图像。你应该为图像文件声明一个加载器,如下所示:

{
test: /\.(jpg|png)$/,
exclude: /(node_modules[\\\/])/,
loader: 'file-loader',
options: {
limit: 1024,
name: '[name].[ext]',
publicPath: 'img/',
outputPath: 'img/'
}
}

但是对于你的 CSS,这是我感到困惑的地方,在 react 中我应该在根组件中导入 CSS 引擎,webpack 为我生成一个 CSS 文件,但在你的元素中,我真的不知道。也许应该这样写:

import CSS from 'styles.css'; // or any file like styles.scss or styles.less

然后使用 ExtractTextPlugin 生成 CSS 文件:

{
test: /\.css$/,
exclude: /(node_modules[\\\/])/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader'
}
]
})
}

如果你想设置 css-loader 选项使用下面的:

{
test: /\.pcss$/,
exclude: /(node_modules[\\\/])/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]', // for production it should be [hash:base64:5]
sourceMap: true,
}
}
]
})
},

关于javascript - 如何修复我的元素中未加载图像和 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54306930/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com