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


i using react-super-select component in react/redux project i'm working on.

that project uses webpack , style-loader load 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 finding use of style-loader seems overriding styling provided react-super-select.

is there way configure webpack not override style component?

ok, figured out how -- created wrapper component loaded css explicitly:

import react, { proptypes, component } 'react'; import reactsuperselect '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 added line load css in 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',         }],     }, 

Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

Cross-Compiling Linux Kernel for Raspberry Pi - ${CCPREFIX}gcc -v does not work -

java.lang.NoClassDefFoundError When Creating New Android Project -