webpackにネストされたSASSをどのようにレンダリングしますか？

Question

は.Buttonため

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 

スタイルが適用されていないようだ...コンポーネントに反応...

.MyComponent { 

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

を次のCSSを取ると、次のよう。

Webpackセットアップでpostcss-loader、sass-loader、style-loader、node-sassを使用しています。

Answer 1

WebpackはSASSファイルを検出しており、正しく設定されていれば、すべて.cssファイル内に配置されます。だから、

、（多くがあるない場合はどのようにあなたが表示されますスターターキットと反応）のは、例えば、あなたのwebpack.config.jsがそれを行うように構成されて言わせ

使用すると、このようなクラス名を使用する必要があります。

を

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" 
} 

それだけで

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

だったので、私はSCSSビットを削除