2016-05-10 3 views
1

Я использую эту библиотеку для слайд-шоу под названием Flickity, для чего требуется использовать файл css flickity.min.css. В моем проекте я использую postCSS и при включении этого flickity.min.css в мои компоненты CSS, такие как:Как импортировать css из библиотек через postCSS?

@import ./lib/flickity.min 

его классы получают приставку следующим образом: MyComponent__flickity-class_35aw проблемы с этим состоит в том, что flickity создает новые элементы DOM и опирается на своих классах, поэтому в инспекторе класс для него будет .flickity-class, поэтому стили не применяются к нему, я пытаюсь выяснить, как правильно его включить.

Использование реагируют + WebPack программу настройки

ответ

2

Похоже, вы импортирования CSS, как CSS Modules. Если вы не собираетесь использовать CSS модули вам просто нужно удалить «модули» из вашего WebPack конфигурации, т.е.

loaders: [ 
    { 
     test: /\.css$/, 
     loaders: 'style!css?modules' 
    } 
] 

Если только стать:

loaders: [ 
    { 
     test: /\.css$/, 
     loaders: 'style!css' 
    } 
] 

Если же вы хотите использовать модули CSS для некоторых файлов, но не для других, я бы рекомендовал определить несколько конфигураций загрузчика CSS на основе соответствующей эвристики, например если ваш каталог/lib/будет содержать только «глобальный» CSS, вы можете сделать это:

loaders: [ 
    { 
     test: /\.css$/, 
     exclude: /lib/, 
     loaders: 'style!css?modules' 
    }, 
    { 
     test: /\.css$/, 
     include: /lib/, 
     loaders: 'style!css' 
    } 
] 
Смежные вопросы