Webpack @import顺序scss，css未保留

如何解决Webpack @import顺序scss，css未保留

当前结果

SimpleBar
引导程序
主要

所需结果

引导程序
SimpleBar
主要

“。css”文件似乎先捆绑在一起。

webpack.config.js

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

module.exports = {
    mode: 'development',entry: './src/scripts/app.js',output: {
        filename: 'scripts/app.js'
    },plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles/app.css'
        })
    ],module: {
        rules: [
            {
                test: /\.(css|scss)$/,use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },{
                        loader: 'css-loader',options: {
                            sourceMap: true
                        }
                    },{
                        loader: 'postcss-loader',options: {
                            postcssOptions: {
                                plugins: [
                                    'autoprefixer'
                                ]
                            },sourceMap: true
                        }
                    },{
                        loader: 'resolve-url-loader',{
                        loader: 'sass-loader',options: {
                            sourceMap: true
                        }
                    }
                ]
            },{
                test: /\.(eot|otf|svg|ttf|woff|woff2)$/,use: [
                    {
                        loader: 'file-loader',options: {
                            outputPath: 'fonts',publicPath: '../fonts'
                        }
                    }
                ]
            }
        ]
    },watch: true
};

src / scripts / app.js

import '../styles/app.scss';

src / styles / app.scss

@import '~bootstrap/scss/bootstrap';
@import '~simplebar/dist/simplebar.css';
@import 'main';

请注意，“ SimpleBar”不带有可解决问题的“ .scss”文件。我也不想从“ node_modules”目录中重命名“ .css”文件。

  "devDependencies": {
    "autoprefixer": "^9.8.6","css-loader": "^4.3.0","file-loader": "^6.1.0","mini-css-extract-plugin": "^0.11.1","postcss": "^7.0.32","postcss-loader": "^4.0.1","resolve-url-loader": "^3.1.1","sass": "^1.26.10","sass-loader": "^10.0.2","webpack": "^4.44.1","webpack-cli": "^3.3.12"
  }

＃1解决方案（我不太喜欢）

src / scripts / app.js

import '../styles/vendor.scss'; // Bootstrap and other goodies
import 'simplebar/dist/simplebar.css';
import '../styles/main.scss';