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

【问题标题】：Webpack style-loader modules are overriding installed component cssWebpack 样式加载器模块正在覆盖已安装的组件 css
【发布时间】：2016-04-21 18:16:30
【问题描述】：

我在我正在处理的 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' ]),
        ],
    },
};

我发现 style-loader 的这种使用似乎覆盖了 react-super-select 提供的样式。

有没有办法配置 webpack 使其不会覆盖该组件的样式？

【问题讨论】：

加载样式的顺序取决于导入模块的顺序。这就是文档所说的。
这如何回答我的问题？您是否建议我在module.loaders 数组的末尾放置某种“css”加载程序？如果是这样，我该如何构建它。在这种情况下告诉我 RTFM 并不是很有帮助。
我的意思是你不能影响加载样式的顺序（所以答案是否定的）。但是，如果您可以将冲突的模块分成单独的包，您可以使用text extraction plugin 将 CSS 提取到单独的文件中，并自行以正确的顺序将这些文件包含在 HTML 文档中。
看起来这可能是一种方法：github.com/webpack/css-loader/issues/215。是不是我的 css-loader 正在加载所有 CSS？

标签： css reactjs webpack redux

【解决方案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 配置中添加了一行来加载 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',
        }],
    },

【讨论】：