Webpack style-loader modules are overriding installed component css - css

Question

I am using the react-super-select component in a react/redux project that I'm working on.
That project currently uses webpack and style-loader to load my styling:
const path = require('path');
const webpack = require('webpack');
const poststylus = require('poststylus');
module.exports = {
entry: [
'webpack-hot-middleware/client',
'./src/client/index',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
{
test: /\.styl$/,
loader: 'style-loader!css-loader?modules!stylus-loader',
}],
},
stylus: {
use: [
poststylus([ 'autoprefixer', 'rucksack-css' ]),
],
},
};
I am finding that this use of style-loader seems to be overriding the styling provided with react-super-select.
Is there a way to configure webpack so that it does not override the style for this component?

Answer 1

Ok, I figured out how to do this -- I created a wrapper component that loaded the css explicitly:
import React, { PropTypes, Component } from 'react';
import ReactSuperSelect from 'react-super-select';
import 'react-super-select/lib/react-super-select.css';
export default class Dropdown extends Component {
render() {
const { options, onChange, ...preferences } = this.props;
return (
<ReactSuperSelect placeholder={preferences.placeholder}
dataSource={options}
onChange={onChange}
searchable={preferences.searchable} />
);
}
}
Dropdown.propTypes = {
options: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
preferences: PropTypes.object.isRequired,
};
and then I added a line to load css in my webpack config:
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file',
},
{
test: /\.styl$/,
loader: 'style!css?modules!stylus',
},
{
test: /\.css$/,
loader: 'style!css',
}],
},