如何在 css-modules 中实现 react-dates css？答案

【问题标题】：How to implement react-dates css in css-modules?如何在 css-modules 中实现 react-dates css？
【发布时间】：2020-08-14 21:48:14
【问题描述】：

所以 react-dates css 工作正常，直到我转移到 css-modules。我尝试从 index.js 文件中的节点模块和 html 文件的头部导入 css 文件，但它们都不起作用。任何帮助或建议将不胜感激。

【问题讨论】：

我也遇到了同样的问题，你找到解决办法了吗？

标签： reactjs server-side-rendering css-modules react-dates

【解决方案1】：

这对这个问题非常有效

在webpack.config.js 中定义一个检查你的文件的函数决定它是 css 模块 还是 global；使用 getLocalIdent 完成选项。

这是我目前在设置中使用的方法。

这也要求你的文件有一些命名约定， [name].module.css 用于 css 模块，[name].css 用于常规文件。请参见下面的示例：

// regex to test for modules, loaderUtils is part of webpack dependencies
const cssModuleRegex = new RegExp(/\.module\.(less|css)$/);
const loaderUtils = require("loader-utils");

// inside webpack rules
      {
        test: /\.(less|css)$/,
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    getLocalIdent: getLocalIdent
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      }

// this is a copy of the default function, modified slightly to achieve our goal
function getLocalIdent(loaderContext, localIdentName, localName, options) {

    // return local name if it's a global css file
    if (!cssModuleRegex.test(loaderContext.resourcePath)) {
        return localName;
    }

    if (!options.context) {
      // eslint-disable-next-line no-param-reassign
      options.context = loaderContext.rootContext;
    }

    const request = path
      .relative(options.context, loaderContext.resourcePath)
      .replace(/\\/g, '/');

    // eslint-disable-next-line no-param-reassign
    options.content = `${options.hashPrefix + request}+${localName}`;

    // eslint-disable-next-line no-param-reassign
    localIdentName = localIdentName.replace(/\[local\]/gi, localName);

    const hash = loaderUtils.interpolateName(
      loaderContext,
      localIdentName,
      options
    );

    return hash
      .replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
      .replace(/^((-?[0-9])|--)/, '_$1');
  }

来源：How to apply global styles with CSS modules in a react app?

【讨论】：