設置的WebPack SASS裝載機分離風格

Question

在我的應用程序，我有風格

• 風格
  1. 頭
  2. 主要

頭文件這樣的文件夾結構包含應該在<style>標記中的樣式以快速呈現第一個屏幕。

主文件夾包含應該編譯爲style.css的樣式。

如何設置網頁包sass-loader來做到這一點？

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>