使用Webpack 4将更少的文件和sass文件捆绑到单个scss文件中

Question

我正在开发要在其他项目中使用的组件库，使用Ant设计库，该组件库使用较少，并且在组件项目中使用Sass，我试图将所有较少的sass文件捆绑到一个sass文件中，但是我有一些想在其他项目中使用的sass变量，所以我不想在scss中转换最终文件

我已经尝试使用https://webpack.js.org/plugins/mini-css-extract-plugin/，但是我注意到webpack总是在CSS中转换我的文件。

这是我的webpack配置：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: [path.join(__dirname, 'src/index.tsx')],
    externals: [nodeExternals()],
    module: {
        rules: [
            {
                test: /\.tsx?/,
                use: [
                    'babel-loader',
                    {
                        loader: 'ts-loader',
                        options: {
                            // disable type checker - we will use it in fork plugin
                            transpileOnly: true
                        }
                    }
                ]
            },
            {
                test: /.svg$/,
                use: [
                    {
                        loader: '@svgr/webpack',
                        options: {
                            icon: true,
                            svgo: true,
                            replaceAttrValues: {
                                '#5E5854': 'currentColor'
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(scss|sass|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { url: false, sourceMap: true } },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true }
                    }
                ]
            },
            {
                test: /\.(less)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { url: false, sourceMap: true } },
                    { loader: 'less-loader', options: { sourceMap: true, javascriptEnabled: true, modifyVars: require('./src/theme/override/vars') } }
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eot)$/,
                include: path.resolve(__dirname, '../src/theme/fonts'),
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            },
            {
                test: /\.png$/,
                include: path.resolve(__dirname, '../src/theme/assets'),
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'assets/'
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx'],
        alias: {
            '@root': path.join(__dirname, 'src')
        }
    },
    output: {
        path: path.resolve(__dirname, './lib'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new ForkTsCheckerWebpackPlugin({
            useTypescriptIncrementalApi: true,
            tslint: true
        }),
        new MiniCssExtractPlugin({
            filename: 'styles2.css',
            chunkFilename: '[id].css'
        })
    ]
};