jantimon/html-webpack-plugin

CSS resolving order

Devinora opened this issue · 2 comments

Devinora commented

Faced with the problem of connecting CSS files. I do not know how to sort the correct order. JS is ok. I tried to use chunksSortMode, but it is not suitable for CSS, and the function itself provides few options. Is there a way to control the file connection process?

import '../../scss/pages/index';
import '../../scss/base/_footer';
<head>
   <meta charset="utf-8">
   <title>Webpack: Home</title>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
   <link rel="shortcut icon" type="image/png" href="img/favicon~6a4b5400..png">
   <link href="css/styles~cart~index~_footer~7620310d.css" rel="stylesheet">
   <link href="css/styles~index~8752d8ff.css" rel="stylesheet">
</head>
wswmsword commented

@Devinora optimization.splitChunks.cacheGroups.[group].priority can be used to solve the order problem:

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        index: {
          chunks: "all",
          enforce: true,
          test: /index\.css$/i,
          name: "index",
          priority: 102,         
        },
        footer : {
          chunks: "all",
          enforce: true,
          test: /_footer\.css$/i,
          name: "footer",
          priority: 101,  
        }
      }
    }
  }
}
alexander-akait commented

Let's close, answer above, feel free to feedback