Ad

Webpack Style-loader Modules Are Overriding Installed Component Css

- 1 answer

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?

Ad

Answer

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',
        }],
    },
Ad
source: stackoverflow.com
Ad