设置 webpack sass-loader 以分离样式

【问题标题】：Setup webpack sass-loader to separate styles设置 webpack sass-loader 以分离样式
【发布时间】：2017-02-15 21:06:01
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案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>

【讨论】：