将React 17与webpack 5和babel-plugin-react css-模块(带有样式表的css模块)集成在一起。

Question

我正在尝试安装一个反应应用程序的最新版本。反应17，Webpack 5等模块。

通过使用babel-plugin-react-css-modules，我需要具有styleName概念的css模块

尝试运行代码会显示输出，但没有应用样式。

package.json

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "React Template App",
  "author": "",
  "license": "ISC",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "format": "prettier --write \"src/**/*.js\"",
    "eslint-fix": "eslint --fix \"src/**/*.js\""
  },
  "dependencies": {
    "babel-plugin-react-css-modules": "^5.2.6",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "eslint": "^7.16.0",
    "eslint-config-react": "^1.1.7",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.21.5",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "less": "^4.0.0",
    "less-loader": "^7.2.0",
    "mini-css-extract-plugin": "^1.3.3",
    "prettier": "2.2.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    open: true,
    host: "localhost",
    compress: true,
    port: process.env.CLIENT_PORT,
    hot: true,
    quiet: false
  },
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          // "less-loader",
          {
            loader: 'css-loader',
            options: {
              modules: true,
            }
          }
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
      favicon: "./public/favicon.ico"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  devtool: 'inline-source-map',
};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "babel-plugin-react-css-modules",
      {
        "webpackHotModuleReloading": true,
        "autoResolveMultipleImports": true
      }
    ]
  ]
}

home.js

import React from "react";

import "./style.css";

const Home = () => {
  return (
    <div styleName="container">
      <div styleName="title">Hello from Home CSS</div>
    </div>
  );
};

export default Home;

style.css

.container {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 24px;
  color: red;
}

Answer 1

这是一个有趣的问题，它需要我们做更多的事情来使它工作如下：

在生成名称的情况下，

• babel-plugin-react-css-modules没有与css-loader一起正常工作。但幸运的是，通过使用@dr.pogodin/babel-plugin-react-css-modules临时修复程序，我们有了一项工作。所以只需安装所需的软件包：

npm i -D @dr.pogodin/babel-plugin-react-css-modules postcss // postcss is required aslo

通过更改.babelrc中的名称

• 重新配置配置

{
  // ...
  "plugins": [
    [
      "@dr.pogodin/babel-plugin-react-css-modules",
      {
        "webpackHotModuleReloading": true,
        "autoResolveMultipleImports": true
      }
    ]
  ]
}

最后，我们将更改类名，使其在webpack.config.js中的babel-plugin-react-css-modules和css-loader之间保持一致。

{
  test: /\.css$/,
  use: [
    // ...
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[path]___[name]__[local]___[hash:base64:5]', // This pattern matches with the default in `babel-plugin-react-css-modules`
        },
      }
    }
  ],
}