使用webpack编译时CSS规则顺序错误

Question

我有一个与webpack编译相关的CSS顺序问题。

我目前在依赖项中使用以下软件包：

• "css-loader": "^0.28.4",
• "style-loader": "^0.18.2",
• "sass-loader": "^6.0.6",
• "sass-resources-loader": "^1.3.0",
• "webpack": "^3.5.5",

这是我的webpack.config.js文件：

const { alias } = require('./webpack/common.js');

const path = require('path');
const webpack = require('webpack');
const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const nodeEnv = process.env.NODE_ENV || 'development';
const isProd = nodeEnv === 'production';

const sourcePath = path.join(__dirname, './src');
const staticPath = path.join(__dirname, './dist');

const commonCssOptions = {
  sass: {
    loaders: ['sass-loader', 'sass-resources-loader'],
  },
  context: path.resolve(__dirname, '.'),
  output: {
    path: 'dist',
  },
};

const plugins = [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: Infinity,
    filename: 'vendor.bundle.js',
  }),
  new webpack.DefinePlugin({
    'process.env': { NODE_ENV: JSON.stringify(nodeEnv) },
  }),
  new webpack.NamedModulesPlugin(),
  new ExtractTextPlugin({ filename: 'css/bundle.css', disable: false, allChunks: true }),
  new webpack.ContextReplacementPlugin(
    /moment[/\\]locale/,
    /(en-gb)\.js/
  ),
];

if (isProd) {
  plugins.push(
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
      options: commonCssOptions,
    })
  );
} else {
  const dashboard = new Dashboard();
  plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: commonCssOptions,
    }),
    new DashboardPlugin(dashboard.setData)
  );
}

module.exports = {
  devtool: isProd ? false : 'cheap-module-source-map',
  entry: {
    js: './src/index.js',
    vendor: [
      'babel-polyfill',
      'bootstrap-loader',
      'classnames',
      'react',
      'react-dom',
      'react-redux',
      'redux',
      'react-router',
      'react-router-dom',
      // 'moment',
    ],
  },
  output: {
    path: staticPath,
    publicPath: '/',
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader',
          query: {
            name: '[name].[ext]',
          },
        },
      },
      {
        test: /\.s?css$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true,
              localIdentName: '[name]__[local]_[hash:base64:5]',
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [
                path.join(__dirname, './components-lib/src/assets/styles'),
              ],
            },
          },
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                './components-lib/src/assets/styles/_variables.scss',
                './components-lib/src/assets/styles/_mixins.scss',
              ],
            },
          },
          'postcss-loader',
        ],
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.jsx', '.js'],
    modules: [
      'node_modules',
      sourcePath,
    ],
    alias,
  },
  plugins,
  devServer: {
    contentBase: './src',
    historyApiFallback: true,
    host: '0.0.0.0',
    port: 3000,
    compress: isProd,
    inline: !isProd,
    hot: !isProd,
    quiet: true,
    stats: {
      assets: true,
      children: false,
      chunks: false,
      hash: false,
      modules: false,
      publicPath: false,
      timings: true,
      version: false,
      warnings: false,
      colors: {
        green: '\u001b[32m',
      },
      performance: {
        hints: false,
      },
    },
  },
  externals: {
    cheerio: 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  },
};

在初始加载时，我的 CSS 顺序错误

但是在热重载时，顺序变得正确。

我的组件库是一个Git子模块（如果这很重要）。

- To_wave

Answer 1

我注意到包含HotModuleReplacementPlugin有时会改变CSS顺序，仍在尝试弄清原因。

- sbl03

Answer 2

我认为由于事物被重写的方式，排序注定会改变，即新的东西将在底部。我还注意到Webpack无法保证CSS的顺序。我找不到“webpack”解决方案，也不确定是否有解决方案。可能不是你想听到的，抱歉！

我解决它的唯一方法是使用smaccs/BEM符号或确保编写CSS很少/从不覆盖其他CSS。例如，如果您需要使用“修饰符”将背景从白色更改为红色，则实际上是两个修饰符，并且默认的“基本”类根本没有设置背景。这样，您可以保证排序无关紧要。说实话，这种编写CSS的方式更易读和可维护，但我偏离了主题！

- peter.mouland