javascript - 如何使用 MiniCssExtractPlugin 控制 CSS 的顺序？

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'
    })    
  ]

我正在创建一个包含一些 vanilla sass 样式和一些 css 模块样式的 css 文件。有没有办法控制它，以便模块 css 在输出的 bundle.css 文件中的常规 css 之后出现？它现在总是在它之前。

我已经尝试在 package.json 中重新排序它们。我试过使用 oneOf。

Answer 1

我在我的 React 应用程序中遇到了这个问题，经过多次用头撞墙后，我意识到这是我的 App 和组件相对于其他 css 导入的顺序。事后看来，这是非常明显的，但我花了一些时间才做到这一点。

// 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'));