如何使用 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'
    })    
  ]

我正在创建一个 css 文件，其中包含一些 vanilla sass 样式和一些 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'));

Answer 2

你只需要按订单导入就可以了

@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";''

我的网页包配置

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"
                    }
                ]
            }
        ]
    }

你可以在这里查看我的完整网页包