How do you render nested SASS in webpack?

Question

Take the following css...

.MyComponent {

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

And the following React component...

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

The styles for .Button don't seem to be applied.

I'm using postcss-loader, sass-loader, style-loader and node-sass in my Webpack set-up.

score 0 · Answer 1 · answered Jun 18 '16 at 14:25

Webpack is detecting the SASS file and if configured correctly it will put them all inside .css file.

So, let's say for example your webpack.config.js is configured to do it (If not there are many React Starter Kit that will show you how)

Use should use the class names like this:

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

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

export default MyComponent

Assuming Webpack will take care the stylesheets.

score -2 · Answer 2 · answered Nov 07 '16 at 20:47

Webpack novice here. I had the same problem. My webpack.conf.js had this in it.

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

I removed the scss bit so it was just

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

How do you render nested SASS in webpack?

2 Answers2

Linked