相似命名的React组件的CSS模块具有冲突样式

如何解决相似命名的React组件的CSS模块具有冲突样式

我最近将Webpack版本从3升级到了4.x。从那以后，我注意到在某些情况下我遇到了一些样式冲突。

例如，我有两个名为PlanCard的不同组件，它们位于应用程序的两个不同目录中。为了简洁起见，假设目录结构类似于以下内容：

- app
+ - Onboarding
  + - OnboardingMembership
    + - PlanCard
      + PlanCard.jsx
      + PlanCard.module.scss 
+ - Settings
  + - ClientSelect
    + - PlanCard
      + PlanCard.jsx
      + PlanCard.module.scss

但是，我发现OnboardingMembership/PlanCard中的样式在应用程序中使用时已应用于ClientSelect/PlanCard。例如，在ClientSelect内正在导入ClientSelect/PlanCard的页面上，我在元素检查器中看到以下内容：

在与该应用程序捆绑在一起的css文件中搜索PlanCard时，我注意到的另一件奇特的事情是：

对我来说最突出的是哈希值。据我所知，这些价值观应该有所不同，我怀疑这就是冲突的根源。

为完整起见，我将包含一些相关的webpack文件。请耐心等待，因为它是一个相当大的应用程序，所以webpack文件被分解成几个文件：

// webpack.dev.js
/* eslint-env node */
const merge = require('webpack-merge')

const common = require('./webpack.common')
const plugins = require('./webpack/plugins')
const outputs = require('./webpack/outputs')
const modules = require('./webpack/modules')

module.exports = merge(common,{
  mode: 'development',devtool: 'cheap-module-source-map',output: outputs.client,module: modules.client,plugins: [...plugins.client,...plugins.clientDev],})

// webpack.common.js

/* eslint-env node */

const { ROOT_PATH,path } = require('./webpack/constants')
const entries = require('./webpack/entries')
const resolves = require('./webpack/resolves')

module.exports = {
  context: path.join(ROOT_PATH,'frontend'),optimization: {
    splitChunks: {
      name: 'common',minChunks: 3,},entry: entries.client,resolve: resolves.client,}

// webpack/plugins.js
'use strict'
/* eslint-env node */

const {
  extractCSSModules,extractCSS,extractCSSModulesProd,extractCSSProd,extractCreatorSCSS,} = require('./constants')

const ManifestPlugin = require('webpack-manifest-plugin')

const plugins = {}

plugins.client = [
  new ManifestPlugin({
    generate: generateManifest,}),]

plugins.clientDev = [
  extractCSS,extractCSSModules,]

plugins.clientProd = [
  extractCSSProd,]


module.exports = plugins

// webpack/outputs.js
'use strict'
/* eslint-env node */

const { path,ROOT_PATH,outputTemplates } = require('./constants')

const outputs = {}

outputs.client = {
  filename: outputTemplates.development.js,chunkFilename: outputTemplates.development.jsChunk,path: path.join(ROOT_PATH,'/public/build'),publicPath: '/build/',}

outputs.clientProd = {
  filename: outputTemplates.production.js,chunkFilename: outputTemplates.production.jsChunk,}

outputs.testUtils = {
  filename: '[name].bundle.js','frontend_build/testUtils'),}

module.exports = outputs

// webpack/module.js
'use strict'
/* eslint-env node */

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const { path,ROOT_PATH } = require('./constants')

const modules = {}

const isDevelopment = process.env.NODE_ENV === 'development'

modules.client = {
  rules: [
    {
      test: /\.(js|jsx)$/,use: 'babel-loader',exclude: /node_modules/,{
      test: /\.module\.(css|scss)$/,use: [
        isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,{
          loader: 'css-loader',query: {
            modules: true,namedExport: true,sourceMap: isDevelopment,camelCase: true,importLoaders: true,localIdentName: '[name]__[local]__[hash:base64:5]',{
          loader: 'postcss-loader',options: {
            plugins: () => [
              require('autoprefixer')({
                browsers: ['> 1%','last 2 versions'],],{ loader: 'sass-loader' },include: path.join(ROOT_PATH,exclude: path.join(ROOT_PATH,'frontend','css'),{
      test: /\.scss$/,{ loader: 'css-loader' },include: '/node_modules/foundation/scss',query: {
            namedExport: true,{
      test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,use: [
        {
          loader: 'file-loader',options: {
            name: '[name].[hash].[ext]',}

modules.clientProd = {
  rules: [
    {
      test: /\.(js|jsx)$/,options: { modules: true,exportOnlyLocals: true },use: [
        {
          loader: MiniCssExtractPlugin.loader,{ loader: 'style-loader' },}

module.exports = modules

// webpack/constants.js

'use strict'
/* eslint-env node */

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

const ROOT_PATH = path.resolve(__dirname,'../../')

const outputTemplates = {
  production: {
    scss: '[name].scss',css: '[name].[hash].css',cssModule: '[name].modules.[hash].css',js: '[name].[hash].js',jsChunk: '[name].chunk.[chunkhash].js',development: {
    scss: '[name].scss',css: '[name].css',cssModule: '[name].modules.css',js: '[name].js',jsChunk: '[name].chunk.js',}

const extractSCSS = new MiniCssExtractPlugin({
  filename: outputTemplates.development.scss,allChunks: true,})

const extractCSSModules = new MiniCssExtractPlugin({
  filename: outputTemplates.development.cssModule,})
const extractCSS = new MiniCssExtractPlugin({
  filename: outputTemplates.development.css,})

const extractCSSModulesProd = new MiniCssExtractPlugin({
  filename: outputTemplates.production.cssModule,})
const extractCSSProd = new MiniCssExtractPlugin({
  filename: outputTemplates.production.css,})

const extractCreatorSCSS = new MiniCssExtractPlugin({
  filename: 'creator.bundle.css',})


module.exports = {
  webpack,path,extractSCSS,outputTemplates,}

如果您仍然与我在一起，我非常感谢您能抽出宝贵的时间给我。我的具体问题是：

究竟是什么原因导致命名冲突（或没有为具有相同名称的其他组件正确生成新的哈希）？
应该更改我的配置吗？
尽管我每天都在使用webpack，但我曾经真正地对其进行过深入研究，以了解其内部知识或最佳实践。如果您发现还有其他可以做得更好的事情，请随时在评论中注明。

相似命名的React组件的CSS模块具有冲突样式

如何解决相似命名的React组件的CSS模块具有冲突样式

相关推荐