新建React项目完成,编写第一个.styl
或.css
文件,运行时发现报错了。
错误信息:
Error: "turn_me" CSS module is undefined.
原因:
css默认加载配置,只针对.module.css
的文件才进行css文件解析。
而我们一般编写css文件是不会写module
后缀的(如demo.css)。
所以没有真正加载css文件,最终导致报找不到对应的样式文件。
解决办法:
修改webpack
配置,把只有.css
后缀的文件也加入加载代码
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
完整示例:
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}),
// 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,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}),
},
暂无评论