Почему импортированные стили SASS очищаются с помощью PurgeCSS при использовании camelCase? - PullRequest
0 голосов
/ 23 мая 2019

Я пытаюсь объединить CSS-модули и PurgeCSS, чтобы получить область видимости модуля и легкий пакет CSS.

Мне удалось выполнить это с использованием синтаксиса, подобного styles["my-class"], но я бы предпочел styles.myClass (который работает, но удаляется для импортированного SASS в файлах SASS).

SASS из локального файла работает должным образом, но SASS @ импортируется из node_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,
                        },
                    },
                ],
            },
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...