css 模块不适用于 Webpack 构建后的反应组件

问题描述

我目前正在使用最新版本的 Webpack 从 TSX 和 SCSS 文件构建文件，所以我的问题是在将文件构建到 JS 和 CSS 模块之后。所有样式都不适用于任何 React 组件，

你可以在下面看到我的配置

这是我的 SCSS 文件。

// Home.module.scss
.addgame {
  background-color: aqua;
}

我的 React 文件

import React from 'react';

const styles = require('./Home.module.scss');

export default function HomePage() {
  return (
    <div className={styles.addgame}>HomePage</div>
  );
}

我有 2 个 Webpack 文件

//Webpack.config.js
// const webpack = require('webpack');
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const common = require('./webpack.common.js');

module.exports = merge(common,{
  mode: 'production',devtool: 'source-map',plugins: [
    new HtmlWebpackPlugin({
      hash: true,template: './src/index.html',minify: {
        removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,useShortDoctype: true,removeEmptyAttributes: true,removeStyleLinkTypeAttributes: true,keepClosingSlash: true,minifyJS: true,minifyCSS: true,minifyURLs: true,},}),new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',chunkFilename: '[id].[contenthash].css',],optimization: {
    moduleIds: 'deterministic',runtimeChunk: true,}
});

这是常见的 Webpack

//webpack.common.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  context: process.cwd(),entry: {
    index: './src/index.tsx',plugins: [new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),new WebpackManifestPlugin()],module: {
    rules: [
      {
        test: /\.ts(x?)$/,use: ['babel-loader','ts-loader'],exclude: /node_modules/,{
        test: /\.js$/,use: [
          {
            loader: 'babel-loader',{
        test: /\.s[ac]ss$/i,use: [
          {
            loader: MiniCssExtractPlugin.loader,options: {
              modules: {
                namedExport: true,{
            loader: 'css-loader',options: {
              modules: true,// Run `postcss-loader` on each CSS `@import`,do not forget that `sass-loader` compile non CSS `@import`'s into a single file
              // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
              importLoaders: 2,'postcss-loader','sass-loader',{
        // asset
        test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource',{
        // asset
        test: /\.(woff|woff2|eot|ttf|otf)$/i,resolve: {
    extensions: ['.ts','.tsx','.js','scss'],output: {
    filename: '[name].[contenthash].js',path: path.resolve(__dirname,'../build'),pathinfo: false,publicPath: '/',};

//postcss configure
module.exports = {
    plugins: [
        "postcss-preset-env","postcss-modules"
    ]
}

///babel
{
  "presets": [
    [
      "@babel/preset-env",{
        "useBuiltIns": "usage","corejs": 3
      }
    ],["@babel/preset-typescript"],["@babel/preset-flow"],["@babel/preset-react"]
  ],"plugins": [
    ["@babel/plugin-transform-flow-strip-types"],["const-enum"],["@babel/plugin-transform-typescript"],["@babel/plugin-syntax-dynamic-import"],["@loadable/babel-plugin"]
  ]
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）