Невозможно получить Webpack 4 для разделения / разбиения файлов Sass

Question

У меня есть приложение ASP.Net MVC, в котором я пытаюсь получить таблицу стилей и файл javascript для каждой страницы.Как и следовало ожидать, на разных страницах будет много кода, особенно стили.Мы использовали Sass для стилизации, и я пытаюсь заставить Webpack кодировать дедупликацию / разделение на совместно используемом коде.Я также использую mini-css-extract-plugin, который, я думаю, может быть частью моей проблемы, но я отвлекся.Моя структура пути такова:

/ assets- / JS- / стили- / самозагрузки- / Примеси- / страницы---/Страница 1---- page1.scss---/страница 2---- page2.scss- / коммунальные услуги--_ general.scss--_ mixins.scss--_ utilities.scss--app.scss

---

Мой файл app.css выглядит следующим образом:

@import "./utilities/colors";
@import '~bootstrap/scss/functions';
@import './bootstrap/variables';
@import '~bootstrap/scss/bootstrap';
@import './bootstrap/selector-overrides';
@import './general';
@import "./mixins";
@import './utilities';

Так что в верхней части page1.scss и page2.scss мне нужно импортировать это приложение.файл scss.Это приводит к тому, что практически все в app.scss добавляются к каждому файлу, в результате чего их размер составляет 900 КБ.

Я попытался установить этот файл app.scss в качестве отдельной точки входа и удалить импорт, но затемстраницы не могут быть построены, потому что у них нет времени доступа к этим значениям.

Я безуспешно пробовал несколько разных конфигураций конфигурации splitChunks.

Это мой текущий веб-пакет.config.ts file:

import * as path from 'path';
import * as webpack from 'webpack';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import * as ExtractCssChunks from 'extract-css-chunks-webpack-plugin';

const config: webpack.Configuration = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
      app: ['./assets/js/index.js'],
      page1: ['./assets/js/pages/page1.ts'],
      page2: ['./assets/js/pages/page2.ts']
    },
    module: {
        rules: [
        {
            test: /\.ts$/,
            loader: 'awesome-typescript-loader'
        },
        {
            test: /\.scss$/,
            use: [
                ExtractCssChunks.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2
                    }
                },
                'postcss-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        data: '$cloudinary_url: "";'
                    }
                }
            ]
        }
    ]
},
output: {
    chunkFilename: '[name].bundle.js',
    filename: '[name].bundle.js',
    library: 'LocalLib',
    path: path.resolve(__dirname, 'wwwroot', 'app')
},
optimization: {
    splitChunks: {
        chunks: 'all',
    }
},
plugins: [
    new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: ['**/*', path.join(process.cwd(), 'wwwroot/css/**/*')]
    }),
    new ExtractCssChunks({
        filename: "../css/[name].css",
        chunkFilename: "../css/[name].css"
    }),
    new webpack.EnvironmentPlugin({}),
    new webpack.ProvidePlugin({
        '$': "jquery",
        'jQuery': "jquery",
        'window.jQuery': "jquery"
    })
],
resolve: {
    extensions: ['.js', '.ts'],
    alias: {
        jquery: "jquery/src/jquery"
    }
}

};

export default config;

В конечном счете, мой вопрос заключается в следующем: как разбить общие стили на отдельные файлы, которые я могу загружать и кэшировать отдельно из отдельных файлов подкачки.Есть ли что-то, что я могу сделать в Webpack, чтобы добиться этого, или мне нужно определенным образом переставить мои файлы Sass?

Заранее благодарю за любую помощь.