Question

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

这是我要从头开始制作的react样板。我已经将html和react代码捆绑在一起，但是无法添加样式（CSS）。我听说过ExtractTextPlugin，但无法对其进行配置。请提出一些添加样式的方法。

谢谢。

Answer 1

您需要在 webpack.config.js

中使用style-loader和css-loader

首先，通过npm安装这两个软件包： param = '{}%'.format(name) sql = "SELECT COUNT(id) FROM table WHERE name LIKE %s" with con: cur.execute(sql, (param,))

然后，在npm install style-loader, css-loader --dev文件夹中创建一个 styles.css 并将以下样式添加到文件中（仅出于演示目的，因此您知道它可以正常工作）：

src

别忘了将css文件导入您的 src / index.js ：

body {
  background-color: #ff4444;
}

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

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开发服务器。我已经克隆了您的存储库，并像上面提到的那样进行了更改，它可以正常工作。

对于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', }), ], };，在捆绑生产版本时将需要此，您可以从他们的Repo了解更多

希望有帮助！

Answer 2

您好，Chirag ExtractTextPlugin很好用，但是在缓存和捆绑散列方面。 CSS捆绑包变为 0个字节。因此他们引入了MiniCssExtractPlugin来解决这个问题。随着应用程序大小的增加，缓存静态文件非常重要。首先导入插件：

var MiniCssExtractPlugin = require("mini-css-extract-plugin");

将这些添加到您的webpack配置中：

rules: [

   {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.scss$/,
      use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    }
  ]
}
plugins: [
  new MiniCssExtractPlugin({
    filename: 'style.css',
  }),
  new HtmlWebpackPlugin({
    template: './src/index.html',
  }),

让我知道您问题仍然存在。

使用webpack为捆绑的代码添加样式

2 个答案: