使用 webpack 向捆绑代码添加样式

Question

GitHub： https: //github.com/Chirag161198/react-boilerplate 1

\n\n

这是我尝试从头开始制作的反应样板。\n我已将 html 与反应代码捆绑在一起，但我\xe2\x80\x99m 无法添加样式（CSS）。\n我听说过 ExtractTextPlugin但无法配置它。\n请建议一些向其添加样式的方法。

\n\n

先感谢您。

\n

Answer 1

您需要在webpack.config.js中使用 style-loader 和 css-loader

首先，通过 npm 安装这两个包： npm install style-loader, css-loader --dev

然后，在您的文件夹中创建一个styles.csssrc并将以下样式附加到该文件中（仅用于演示目的，以便您知道它正常工作）：

body {
  background-color: #ff4444;
}

不要忘记在src/index.js中导入 css 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
import './styles.css'; // <- import the css file here, so webpack will handle it when bundling

ReactDOM.render(<App />, document.getElementById('app'));

并在webpack.config.js中使用 style-loader 和 css-loader ：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader' },
      },

      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

如果您没有看到正确的输出，您可能需要再次重新启动 webpack 开发服务器。我已经克隆了您的存储库并进行了如上所述的更改，它有效。

至于ExtractTextPlugin，在捆绑生产构建时您将需要这个，您可以从他们的Repo中了解更多信息

希望能帮助到你！