reactjs - 使用 Webpack 4 在 React 项目中添加 css 文件
问题描述
我正在使用 Webpack 从头开始构建一个简单的 React 应用程序。我终于能够运行开发服务器,当我尝试通过 CSS 应用一些样式时,文件不会加载,我认为我的 Webpack 4 配置不正确。
这是代码:
webpack.config.js
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
mode: 'development',
entry: ['./src/index.js'],
resolve: {
extensions: [".js", ".jsx"]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist',
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 8080
},
module: {
rules: [
{
test: /\.js|.jsx$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["react"]
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader'
}
]
},
};
我的项目结构是这样的,我将只包含src因为它位于根目录中:
**src**
|_assets
|_componentns
|_styles
|_App.css
|_index.css
App.jsx
index.js
index.html
我希望能够为我拥有的每个组件添加多个 css 文件并应用它们,并且能够为index.html设置索引样式。非常感谢您的帮助。
解决方案
您的webpack
配置看起来不错。确保您import
的.css
components
import "./App.css";
class App extends Component {
render() {
return (
<div>
<Child />
</div>
);
}
}
推荐阅读
- python - TFDV Tensorflow 数据验证:如何将 protobuf 模式保存到文件/从文件中加载
- bash - sed 替换具有特殊字符的变量
- solr - SOLR支持团队的流程是什么?
- android - Recyclerview中的对话框onClick
- codenameone - 代号一 - addCommand 不添加菜单
- cron - Openshift cron作业卷曲
- android - 匕首没有注入必填字段
- c# - 使用 bouncycastle c# 加密字符串
- unity3d - 在 VR 中显示视频时减轻眼睛疲劳?
- java - 使用 Java 的 Jira Rest API