Question

我遇到了使用webpack编译的css命令的问题。

我目前在依赖项中使用这些包：

＆＃34; css-loader＆＃34;：＆＃34; ^ 0.28.4＆＃34;，
＆＃34; style-loader＆＃34;：＆＃34; ^ 0.18.2＆＃34;，
＆＃34; sass-loader＆＃34;：＆＃34; ^ 6.0.6＆＃34;，
＆＃34; sass-resources-loader＆＃34;：＆＃34; ^ 1.3.0＆＃34;，
＆＃34; webpack＆＃34;：＆＃34; ^ 3.5.5＆＃34;，

这是我的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子模块（如果它很重要）

Answer 1

我认为，由于事情被重写的方式，顺序必然会改变，即新的东西将在底部。我也注意到Webpack无法保证css的顺序。我无法找到'webpack'解决方案，我不确定是否有。可能是你想听到的东西，对不起！

我解决它的唯一方法是使用smaccs / BEM表示法和/或确保编写CSS很少/永远不会覆盖其他CSS。例如，如果您需要使用“修改器”将背景从白色更改为红色，那么实际上这是两个修改器，默认的“基础”类根本没有背景设置。这样你就可以保证订购无所谓。 TBH，这被证明是一种更可读和可维护的编写CSS的方式，但我离题了！

Answer 2

我注意到包含 HotModuleReplacementPlugin 有时会改变 CSS 顺序，但仍在努力找出原因。

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

2 个答案: