How can I control the order of CSS with MiniCssExtractPlugin?

Question

{
        test: /\.module\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
          {
            loader: 'css-loader',
            options: {
              modules: { localIdentName: '[local]---[hash:base64:5]' }
            }
          },
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: './src/css/_variables.scss'
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        exclude: /\.module\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
          'css-loader',
          'sass-loader'
        ]
      },

...

plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    })    
  ]

I am creating a single css file that includes some vanilla sass styles and some css module styles. Is there a way to control this so that the module css comes AFTER the regular css in the outputted bundle.css file? It's always before it right now.

I've tried reordering them in the package.json. I've tried using oneOf.

Zwinglian

just make sure your imports are ordered, e.g. don't rely on the bundler, have a single main.scss and have that import all the files in the exact order you need. (remember that sass can import plain CSS files just fine) – Bradleybradly

Same issue here - mine is perfect in the production build but inverted in webpack-dev-server. – Wellturned

Answer 1

I had this issue in my React app and after a lot of banging my head against the wall, realized it was the order of my App and components relative to the other css import. In hindsight this was very obvious, but it took me a while to get there.

// Imports css-modules in App and components in App first
// followed by global styles
import App from '$containers/App';
import '$scss/global.css';
...
render((
  <App />
), document.getElementById('root'));

// Imports global styles first
// followed by css-modules in App and components in App
import '$scss/global.css';
import App from '$containers/App';
...
render((
  <App />
), document.getElementById('root'));

Beautiful

"banging my head against the wall" Exactly my experience. Thanks for posting this. – Ladew

Answer 2

You just need to import by the order and you should be good like this

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";
@import "~toastr/toastr";
@import "~react-select/dist/react-select.css";
@import "~react-bootstrap-table/dist/react-bootstrap-table-all.min.css";''

My webpack config

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
    ],
module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }

You can view my full webpack here

Decoction