嗨,我的文件夹结构如下:-
node_modules
src
|____components
|____index.css
|____index.html
|____index.js
|____index.scss
.babelrc
package.json
webpack.config.js
我的webpack.config.js文件的内容如下:-
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry: {
"index": "./src/index.js",
},
output: {
path: path.join(__dirname, "/dist"),
filename: "[name].js",
},
resolve: {
alias: {
components: path.resolve(__dirname, "src/components")
},
extensions: [".js", ".jsx", ".json"],
mainFiles: ["index"]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(s*)css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})//["style-loader", "css-loader", "sass-loader"]
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
}),
new ExtractTextPlugin({
filename: "bundle.css"
})
],
watch: true,
}
我的index.html文件的内容如下:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./index.css">
<title>React Boilerplate</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>
..
<link rel="stylesheet" type="text/css" href="./index.css">
上述行没有将我的index.css加载到浏览器中,而在src / components级别中,我确实有css文件,这些文件已正确打包并分发到bundle.css文件中。
任何帮助都会有很大帮助
答案 0 :(得分:0)
css的链接应为:
<link rel="stylesheet" type="text/css" href="/index.css">
由于publicPath
,因此应该像这样。由于未设置,因此默认为/
。
答案 1 :(得分:0)
css的链接应为:
<link rel="stylesheet" type="text/css" href="../src/index.css">