Я пытаюсь объединить 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,
},
},
],
},