Webpack local styles example

component.css

:local(.green) {
  height: 20px;
  background: green;
}

component.js

const React = require("react")
const css = require("./component.scss")

const Component = React.createClass({
  render () {
    return <div className={css.green}></div>
  }
})

module.exports = Component

create-webpack-config.js

// npm install --save-dev sass-loader css-loader style-loader null-loader

module.exports = function (options) {
  var config = {}
  var loaders = []

  if (options.includeCss) {
    var includePaths = [
      root('src/mixins')
    ]
    var includeParams = includePaths.map(function (path) {
      return 'includePaths[]=' + encodeURIComponent(path)
    }).join('&')
    loaders.push({
      test: /\.scss$/,
      loader: 'style!css!sass?' + includeParams,
    })
    loaders.push({
      test: /\.css$/,
      loader: 'style!css',
    })
  } else {
    loaders.push({
      test: /\.s?css$/,
      loader: 'null',
    })
  }
  
  config.module = { loaders: loaders }
  return config
}

webpack.config.js

// For develoment, for test pass false to null-loader it. 

module.exports = require("./create-webpack-config")({
  includeCss: true,
})