reactjs - SCSS kebab-case 不适用于 React 中的 scss 模块( typescript 模板)

Question

我使用带有 Typescript 模板的 create-react-app 创建了一个新的 React 项目。我使用 SCSS 并尝试使用 CSS 模块方法。但是我看到，当我仅以 camelCase 表示法指定它们时，我的 SCSS 类被应用。这对我不好。我想使用经典的 kebab-case CSS 符号。

这对我有用，但我不喜欢它:

.authContainer {
  background-color: red;
}

这个不行，但是我喜欢

.auth-container {
  background-color: red;
}

这里是组件的例子:

import * as React from 'react';
import styles from './Kek.module.scss';

const Kek = () => {
    return (
        <div className={styles.authContainer}>
            !!!!!!!!!!! HELLO WORLD !!!!!!!!!!!
        </div>
    );
};

export default Kek;

这是一个说明是怎么回事

如何解决？我应该创建一个 webpack.config.js 来覆盖某些东西吗？我做了一些研究，我想，是的，我是。但是，我不确定这种重写会是什么样子。关于这个案例的信息太少了。

更新

正如我在评论中所建议的那样，我试图覆盖 css-loader 的 exportLocalsConvention。 Documentation link

但是要从 webpack.config.js 中覆盖一些东西并不是那么容易。为此，我安装了 react-app-rewired npm 包。我将以下配置添加到我的项目中:

module.exports = function override(config, env) {
    config.module.rules.push({
        loader: 'css-loader',
        options: {
            modules: {
                exportLocalsConvention : 'dashes'
            }
        }
    });
    console.log(config)

    return config;
}

console.log(config) 向我展示了我确实拥有来自 webpack.config.js 的对象。但是接下来有一个问题。当我打开我的应用程序时，我看到这个:

我已经安装了 css-lodaer。有什么问题？

Answer 1

如果您要覆盖 CRA 的 webpack 配置，您可能希望尽可能保留原始配置以避免不必要的错误。可以看到CRA的原始配置here .

写这样的东西应该允许您更改 exportLocalsConvention 而无需更改任何其他内容:

const cssLoader = require.resolve("css-loader");
const isTestingSassModuleRegex = (test) => test.toString() === "/\.module\.(scss|sass)$/";

module.exports = {
    webpack: function (config) {
        config.module.rules.forEach(rule => {
            if (!rule.hasOwnProperty("oneOf")) return;

            rule.oneOf.forEach(loader => {
                if (!loader.test || !isTestingSassModuleRegex(loader.test)) return;

                loader.use.forEach(styleLoader => {
                    if (styleLoader.loader !== cssLoader) return;
                    styleLoader.options.modules.exportLocalsConvention = "asIs";
                });
            });
        });

        return config;
    }
};

这应该与 CRA v5.0.0 兼容。

这个配置只会覆盖 SASS 模块文件的加载器(它的目标是原始配置的 this part)，因为它似乎是你使用的。如果您还需要更改 CSS 或常规 SASS 文件的选项，则需要删除或更改条件 !isTestingSassModuleRegex(loader.test)。