react配置css module,与antd等组件库冲突最新版react webpack 2019.08.05

庾鸿飞
2023-12-01

配置时:先执行npm run eject, 这个是把隐藏的配置显示出来。
webpack.config.js
在配置CSS module时,我在规则里都加了modules:true, 导致CSSmodule和antd冲突,antd样式失效。
{
test: /.(js|mjs)$/,
exclude: /@babel(?:/|\{1,2})runtime/,
loader: require.resolve(‘babel-loader’),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve(‘babel-preset-react-app/dependencies’),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,

            // If an error happens in a package, it's possible to be
            // because it was compiled. Thus, we don't want the browser
            // debugger to show the original code. Instead, the code
            // being evaluated would be much more helpful.
            sourceMaps: false,
          },
        },
        // "postcss" loader applies autoprefixer to our CSS.
        // "css" loader resolves paths in CSS and adds assets as dependencies.
        // "style" loader turns CSS into JS modules that inject <style> tags.
        // In production, we use MiniCSSExtractPlugin to extract that CSS
        // to a file, but in development "style" loader enables hot editing
        // of CSS.
        // By default we support CSS Modules with the extension .module.css
        {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          }),
          // Don't consider CSS imports dead code even if the
          // containing package claims to have no side effects.
          // Remove this when webpack adds a warning or an error for this.
          // See https://github.com/webpack/webpack/issues/6571
          sideEffects: true,
        },
        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
        // using the extension .module.css
        {
          test: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,

modules:true,

在此处添加modules:true时,相应的文件名就是style.module.css

            sourceMap: isEnvProduction && shouldUseSourceMap,
            getLocalIdent: getCSSModuleLocalIdent,
          }),
        },
        {
          test: sassRegex,
          exclude: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 2,
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'sass-loader'
          ),
          // Don't consider CSS imports dead code even if the
          // containing package claims to have no side effects.
          // Remove this when webpack adds a warning or an error for this.
          // See https://github.com/webpack/webpack/issues/6571
          sideEffects: true,
        },
        // Adds support for CSS Modules, but using SASS
        // using the extension .module.scss or .module.sass
        {
          test: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 2,

modules:true,

在此处添加modules:true时,相应的文件名就是style.module.scss

              sourceMap: isEnvProduction && shouldUseSourceMap,
              getLocalIdent: getCSSModuleLocalIdent,
            },
            'sass-loader'
          ),
        },
        // "file" loade
 类似资料: