Как вы делаете вложенный SASS в webpack?

Question

Возьмем следующий CSS ...

.MyComponent { 

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

А следующий Реагировать компонент ...

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, кажется, не применяются.

Я использую postcss-loader, sass-loader, загрузчик стиля и узел в моей настройке Webpack.

Answer 1

Webpack обнаруживает файл SASS, и если он настроен правильно, он помещает их все в файл .css.

Итак, давайте скажем, например, ваш webpack.config.js настроен, чтобы сделать это (если не существует много Реагировать 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') 
}