我尝试按照此处的教程 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/