如何在css模块中实现react dates css

Question

所以react dates css在我转到css模块之前一直运行良好。我尝试从index.js文件和html文件头中的节点模块导入css文件，但都不起作用。如有任何帮助或建议，我们将不胜感激。

Answer 1

这对这个问题非常有效

在webpack.config.js中定义一个函数，该函数将检查您的文件决定它是css模块还是全局；使用getLocalIdent完成选项

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

这也要求您的文件具有一些命名约定，用于css模块的[name].module.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');
}

来源：如何在react应用程序中使用CSS模块应用全局样式？