React 机车滚动和 scss 样式无法正常工作

问：

我有一个使用 webpack 5 构建的网站 我的CSS加载器看起来像这样：

export function buildCssLoader(isDev: boolean) {
    return {
        test: /\.s[ac]ss$/i,
        use: [
            // Creates `style` nodes from JS strings
            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
            // Translates CSS into CommonJS
            {
                loader: 'css-loader',
                options: {
                    modules: {
                        auto: (resPath: string) =>
                            Boolean(resPath.includes('.module.')),
                        localIdentName: isDev
                            ? '[path][name]__[local]--[hash:base64:8]'
                            : '[hash:base64:8]',
                    },
                },
            },
            // Compiles Sass to CSS
            'sass-loader',
        ],
    }
}  

最后，我的类名如下所示：src-widgets-sections-HeroSection-ui-HeroSection-module__heroTextContainer--qcnHwjgr

我正在使用机车滚动进行平滑滚动和滚动动画。为了开始动画/过渡，我将 data-scroll 和 data-scroll-class 属性添加到元素中，如下所示：

<div className={cls.heroTextContainer} data-scroll data-scroll-class="appear"> 
Hello
</div>

作为样式，我使用 scss 模块：

heroTextContainer {
        transition: 1s all ease;
        transform: translateY(100px);

        &.appear {

             transform: translateY(0px);
        }
    }

问题在于类“appear”正确地应用于元素，但样式不适用。当我把

.appear {

             transform: translateY(0px);
        }

在模块外部到简单的 scss 文件，样式可以正确应用，但我只希望它在模块内工作并且仅适用于一个元素（类为“heroTextContainer” 有没有人遇到过这个问题？我是webpack的新手，所以css加载器可能有问题