Ordre de règles CSS incorrect compilé avec webpack

Question

J'ai un problème avec l'ordre css qui se compile avec webpack.

J'utilise actuellement ces paquets dans les dépendances:

• "css-loader": "^ 0.28.4",
• "style chargeur": "^ 0.18.2",
• "SASS-loader": "^ 6.0.6",
• "SASS-ressources-loader": "^ 1.3.0",
• "webpack": "^ 3.5.5",

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

Sur charge initiale, j'ai mal pour css

Mais chaud recharger l'ordre devient correct

Ma bibliothèque de composants est un sous-module git (s'il est important)

Answer 1

Je pense à cause de la façon dont les choses se réécrits, l'ordre est tenu de changer à-dire les nouveautés seront à le fond. J'ai également remarqué que Webpack ne pouvait pas garantir la commande de css. Je n'ai pas réussi à trouver une solution de «webpack» et je ne suis pas sûr s'il y en a une. Probablement bot ce que tu voulais entendre, désolé! La seule façon de le résoudre était soit en utilisant la notation smaccs/BEM et/ou en m'assurant que l'écriture de css rarement/ne sur écrit jamais d'autres CSS. Par exemple, si vous devez utiliser un 'modificateur' pour changer un arrière-plan du blanc au rouge, alors il s'agit en fait de deux modificateurs et la classe 'base' par défaut n'a pas du tout d'arrière-plan. De cette façon, vous pouvez garantir que la commande n'a pas d'importance. TBH, cela s'est avéré être un moyen plus lisible et maintenable d'écrire css, mais je digresse!