新建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,
                },
              }),
            },