5 
{
        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。

4

2 回答 2

5

我在我的 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'));
于 2020-08-07T20:40:54.170 回答
1

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

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

我的 webpack 配置

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

你可以在这里查看我的完整 webpack

于 2019-08-14T15:14:46.080 回答