css - 为什么在使用 camelCase 时 PurgeCSS 会清除导入的 SASS 样式？

Question

我正在尝试结合 CSS-modules 和 PurgeCSS 来获得模块范围和轻量级 CSS 包。

我已经能够使用类似styles["my-class"]但更喜欢的语法来完成此操作styles.myClass（它有效，但在 SASS 文件中导入的 SASS 被剥离）。

本地文件中的 SASS 按预期工作，但 SASS @imported fromnode_modules或其他文件不适用于 camelCase 引用。

在下面的代码中，我将得到如下输出：

.Component--container--AfniF {
  margin: 1em;
}

但是我在组件中引用的所有导入的 SASS 都styles.myClass被清除了。

但是，当被引用时，styles["my-class"]一切都按预期工作，我得到如下输出：

.Component--my-class--6Mlw4 {
  color: purple;
}

.Component--container--AfniF {
  margin: 1em;
}

有任何想法吗？

// otherstyles.scss
.my-class {
    color: purple;
}

// Component.scss
@import "otherstyles";

.container {
    margin: 1em;
}

///Component.js
import React, { Fragment, useState } from "react";
import classnames from "classnames";
import styles from "./Component.scss";


export default function ({ data }) {
    return <div className={classnames([styles.myClass, styles.container])}>

//webpack.config.js

...
           {
                test: /.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            camelCase: true,
                            importLoaders: 1,
                            sourceMap: true,
                            localIdentName: "[name]--[local]--[hash:base64:5]",
                        },
                    },

                    {
                        loader: "postcss-loader",
                    },
                    {
                        loader: "@americanexpress/purgecss-loader",
                        options: {
                            paths: [path.join(__dirname, "src/**/*.{js,jsx}")],
                        },
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            includePaths,
                            outputStyle: "expanded",
                            sourceMap: true,
                        },
                    },
                ],
            },

标签： cssreactjswebpacksassnode-sass