Question

我正在使用我正在进行的react / redux项目中的react-super-select组件。

该项目目前使用webpack和style-loader加载我的样式：

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' ]),
        ],
    },
};

我发现使用样式加载器似乎超越了react-super-select提供的样式。

有没有办法配置webpack，以便它不会覆盖此组件的样式？

Answer 1

好的，我想出了如何做到这一点 - 我创建了一个明确加载css的包装器组件：

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,
};

然后我在webpack config中添加了一行来加载css：

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',
        }],
    },

Webpack样式加载器模块覆盖已安装的组件css

1 个答案: