Настройка WebPack дерзость-погрузчик отделить стили

Question

В моем приложении, у меня есть такая структура папок для стилей

• стили
  1. голова
  2. основных

Глава папки содержит стили, которые должны быть в теге <style>, чтобы быстро отобразить первый экран.

Основная папка содержит стили, которые должны быть скомпилированы в style.css.

Как я могу настроить загрузчик веб-пакетов для этого?

Answer 1

В ваших погрузчиков в вашей WebPack конфигурации добавить:

{ 
     test: /\.scss$/, 
     loader: 'style!css?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!sass' 

} 

Тогда для головы и основной вы можете назвать их с расширением scss и импортировать их как это (в файле JS)

import head from './head.scss' 
import '!style!css?sass!<path-to-your-main>main.scss' 

Тогда вы можете использовать его в своем JSX следующим образом:

<p className={head.myHeaderStyle}>Some text</p>