Глобальный импорт внешних таблиц стилей с модулями CSS - PullRequest
Новая
       80

Глобальный импорт внешних таблиц стилей с модулями CSS

0 голосов
/ 16 марта 2020

Я пытаюсь добавить SASS с внешней таблицей стилей ( Bulma ) в мое приложение React. До сих пор я установил Parcel с CSS модулями по почте css. Это моя .postcssrc конфигурация: 

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "postcss-modules": {
      "generateScopedName": "[name]_[local]_[hash:base64:5]"
    }
  }
}

Я установил node-sass и успешно добавил файл .scss в один из моих компонентов. Внешние (Bulma) стили добавляются через @import "~bulma/bulma"; и корректно разрешаются.

К сожалению, импортированные стили не применяются глобально, и вместо этого имена классов изменяются аналогично локальным определениям, например: 

/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
@-webkit-keyframes container_spinAround_28_Bz {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
@keyframes container_spinAround_28_Bz {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }

Обратите внимание на добавленные префиксы и суффиксы.

В идеале я хотел бы импортировать таблицу стилей глобально и не изменять их имена. Я хотел бы продолжать использовать CSS модули и думаю, что мне также нужно использовать SASS для глобального изменения таблицы стилей Bulma путем переопределения переменных SASS.

В любом случае, вещи, которые я до сих пор пробовал:

  • Использование postcss-nested и перенос импорта с использованием блока :global: 
:global {
  @import "~bulma/bulma";
}

Однако это вызывает исключение: 

main.scss:5018:5: Missing whitespace before :global
  • Создание отдельного файла scss, включенного непосредственно в файл HTML через <link>, а не импортированного в файл jsx / tsx, чтобы избежать использования модулей CSS.

Похоже, что это полностью нарушает Parcel, поскольку он не может связать правильные файлы в скомпилированных HTML файлах, то есть <LONG-HASH>.css вместо сгенерированных main.<HASH>.css.

  • Использование postcss-import.

Либо мои настройки неверны, либо это не влияет на файлы SASS.

1 Ответ

0 голосов
/ 16 марта 2020

Вы можете определить регулярные выражения, чтобы помечать совпадающие файлы как глобальные таблицы стилей с настройкой globalModulePaths. 

    "postcss-modules": {
      "globalModulePaths": [
        ".*\\.global\\..*"
      ]
    }

В приведенном выше примере все файлы помечаются .global. в их именах, например, main.global.css .

Удалось выяснить это при написании вопроса.

...