Блог

Главная - Вопросы по программированию - Создайте пакет с модулями CSS для Next.js

Создайте пакет с модулями CSS для Next.js

#javascript #css #webpack #next.js

#javascript #css #webpack #next.js

Вопрос:

Создание пакета с компонентами пользовательского интерфейса с использованием модулей CSS. Каждый компонент полностью отделен от других и включает в себя стили CSS, подобные этому:

 import css from './styles.css'

const Component = () => {
  return (
    <div className={css.container}>Hello there!</div>
  )
}

export { SearchBar }

В другом пакете , основанном на Next.js Я хочу импортировать такой компонент, как этот:

 import { Component } from '@me/components'

Но Next.js не разрешает импорт CSS модуля из node_modules.

Мой вопрос заключается в том, как я могу создать пакет компонентов с преобразованием CSS в JS. Он не должен быть объединен в один файл, как это делает Webpack. Вместо этого он должен создавать каждый компонент отдельно. Кроме того, я не хочу импортировать огромные CSS-файлы со всеми стилями, объединенными в один файл. Самым простым способом было бы использовать CSS-in-JS, но я хочу использовать PostCSS, написанные в CSS-файлах.

Комментарии:

1. Я сталкиваюсь с аналогичной проблемой

2. @Shubham На самом деле я закончил со styled-components, и я должен сказать, что это был отличный выбор, это как чистый CSS, но у меня есть свобода использования JS в нем.

3. @ Jaroslav Zavodny но мне нужно переопределить некоторые классы, знаете ли вы, как мы можем это сделать без внешних файлов css.

4. @Shubham С помощью стилизованных компонентов вы можете делать все, что захотите, вы даже можете переопределить существующие классы ( styled-components.com/docs /… )

5. не могли бы вы, пожалуйста, помочь мне, как я могу это переопределить.