gpt4 book ai didi

javascript - webpack 样式加载器和 css 加载器对于简单示例不起作用

转载 作者:行者123 更新时间:2023-11-28 17:23:43 25 4
gpt4 key购买 nike

我尝试按照此处的教程 https://webpack.js.org/guides/asset-management/但是我永远无法加载 css 文件。 (文字永远不会是红色的)

https://github.com/bryandellinger/webpackassetmanagement

> --dist
> ----bundle.js
> ----index.html
> --src
> ----index.js
> ----style.css

webpack.config.js

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

package.json

{
"name": "webpack1",
"version": "1.0.0",
"description": "webpack tutorial",
"private": true,
"scripts": {
"dev": "lite-server",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"style-loader": "^0.22.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"lite-server": "^2.4.0",
"lodash": "^4.17.10"
}
}

index.js

    import _ from 'lodash';

function component() {
let element = document.createElement('div');

// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
return element;
}

document.body.appendChild(component(

));

样式.css

.hello {
color: red;
}

index.html

<!doctype html>
<html>
<head>
<title>Asset Management</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

最佳答案

您需要将 css 文件导入到主 index.js 文件中。您可以通过添加 import './style.css';

来做到这一点

更新了index.js

import _ from 'lodash';
import './style.css';

function component() {
let element = document.createElement('div');

// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
return element;
}

document.body.appendChild(component());

关于javascript - webpack 样式加载器和 css 加载器对于简单示例不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52026007/

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