我用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-hero section-ui-hero section-module _ _ heroTextContainer-qcnHwjgr

我使用機車滾動平滑滾動和滾動動畫。為了啟動動畫/過渡，我向元素添加了數據滾動和數據滾動類屬性，如下所示:

<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 {

             transform: translateY(0px);
        }

在簡單scss文件的模塊外部，樣式應用正確，但是我只希望它在模塊內部工作，并且只應用于一個元素(使用類“heroTextContainer ”) 有人遇到過這個問題嗎？我對webpack很陌生，所以css loader可能會有問題