如何在webpack中呈現嵌套的SASS？

Question

拿下面的css ......

.MyComponent {

  color: blue;
  .Button {
    color: red;
  }
}

以下React組件......

import React from 'react'
import classes from './MyComponent.scss'

export const MyComponent = props =>
  <div className={classes.MyComponent}>
    <button className={classes.Button}>My Button</button>
  </div>

export default MyComponent

似乎沒有應用.Button的樣式。

我在我的Webpack設置中使用postcss-loader，sass-loader，style-loader和node-sass。

Answer 1

Webpack正在檢測SASS文件，如果配置正確，它將把它們都放在.css文件中。

所以，比方說，你的webpack.config.js配置為這樣做（如果沒有很多React Starter Kit會告訴你如何）

使用應該使用這樣的類名：

import React from 'react'
import './MyComponent.scss'

export const MyComponent = props =>
  <div className="MyComponent">
    <button className="Button">My Button</button>
  </div>

export default MyComponent

假設Webpack將照顧樣式表。

Answer 2

Webpack新手在這里。 我有同樣的問題。 我的webpack.conf.js中有這個。

{
  test: /\.css$/,
  loader: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')
},
{
  test: /\.scss$/,
  loader: "style!css!sass"
}

我刪除了scss位，所以它只是

{
  test: /\.css$/,
  loader: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')
}