将webpack sass-loader设置为单独的样式

Question

在我的应用中，我有样式的文件夹结构

• 样式
  1. 头
  2. 主

头文件夹包含应该在<style>标签中以快速渲染第一个屏幕的样式。

主文件夹包含应该编译为style.css的样式。

如何设置web pack sass-loader来做到这一点？

Answer 1

在webpack配置中的加载器中添加：

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

}

然后，对于head和main，您可以使用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>