使用 Webpack 4 在 React 项目中添加 css 文件答案

【问题标题】：Addng css files in React project with Webpack 4使用 Webpack 4 在 React 项目中添加 css 文件
【发布时间】：2019-06-23 09:20:58
【问题描述】：

我正在使用 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 设置索引样式。非常感谢您的帮助。

【问题讨论】：

css文件是否注入html中的style标签？尝试检查...

标签： reactjs webpack webpack-4

【解决方案1】：

您所要做的就是在需要时导入 CSS 文件，就像导入 JavaScript 模块一样。因此，如果您想为整个应用程序创建一个样式表，您可以在 index.js 中导入一个全局样式表。

import './styles/index.css';

你可以为每个具有特定样式的组件做同样的事情

import './styles/App.css'

在这种情况下，您可能需要setup CSS modules 以避免重叠类名。

【讨论】：

我已经这样做了，仍然无法正常工作并且没有错误：/

【解决方案2】：

您的webpack 配置看起来不错。确保您 import 所需的 css 文件在您的 components 中。

import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <Child />
      </div>
    );
  }
}

【讨论】：

我这样做了，但仍然没有任何显示。我会更新代码。

【解决方案3】：

好的，菜鸟的错误在这里，我设置 webpack 的方式是我必须先构建它，然后运行开发服务器，而不是相反。以上所有答案都是有效且有用的，我只是忘记在更改后运行构建。

【讨论】：