Я пытаюсь создать библиотеку реагирующего пользовательского интерфейса на модуле npm.Он создан с использованием React и css-модулей.
Когда я импортирую его в другое приложение, модули не имеют каких-либо стилей, а также не имеют имени класса, поэтому я думаю, что стили css нарушены.
Прямо сейчас я использую веб-пакет для комплектации и бабел для переноса.Конечным результатом является минимизированная версия кода.Я попытался импортировать его без объединения веб-пакетов, но я получаю синтаксическую ошибку благодаря jsx.Я использую сборник рассказов для тестирования компонентов, и там все работает хорошо.
Все мои компоненты используют синтаксис:
...
import styles from "./ComponentName.css"
const Component = () => (
<Something className={styles.something}>
</Something>
)
export defaults Component;
Моя конфигурация веб-пакета почти стандартная, добавляется только CSSСекция модулей и babel-загрузчик:
...
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true
}
},
{
loader: "postcss-loader",
options: {
plugins: loader => [
require("postcss-nesting"),
require("postcss-preset-env")({
features: {
"css-properties": true,
"nesting-rules": true,
"custom-media-queries": true,
"media-queries-ranges": true
}
})
]
}
}
]
}
...