Question

我正在尝试将CSS模块和PurgeCSS结合起来以获取模块作用域和一个轻量级的CSS包。

我已经能够使用styles["my-class"]之类的语法来完成此操作，但是我更喜欢styles.myClass（它可以工作，但是会被SASS文件中导入的SASS剥夺）。

来自本地文件的SASS可以正常工作，但是从node_modules或其他文件中导入的SASS不能与camelCase引用一起使用。

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

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

但我在组件中引用为styles.myClass的所有导入的SASS已清除。

但是，当像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,
                        },
                    },
                ],
            },

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

0 个答案: