Проблема сборки Webpack SASS, все компилируется нормально, затем я получаю ошибку JS

Question

Я новичок в вебпаке и использую его для упаковки веб-приложения Angular 2. Что касается заголовка, у меня есть проблемы с ошибками в JS, связанных с компиляцией SASS и ExtractTextPlugin.

Вот соответствующие выдержки из моей конфигурации веб-пакета:

 module: {
    rules: [{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
            fallbackLoader: ['style-loader'],
            loader: [{
                loader: 'css-loader?sourceMap',
                options: {
                    sourceMap: true
                }
            }, {
                loader: 'sass-loader?sourceMap&output=compressed',
                options: {
                    sourceMap: true
                }
            }]
        })
    }]

    new ExtractTextPlugin({
        filename: "style.css"
    }),
}

Сборка завершается успешно, и мой сервер запускается. Однако, когда я запускаю его в браузере, я получаю следующее erorr:

Uncaught TypeError: cssText.replace is not a function
    at extractStyleUrls (http://localhost:3000/vendor.bundle.js:32923:35)
    at http://localhost:3000/vendor.bundle.js:19549:136

Первоначально я ломал голову, пытаясь заставить исходные карты работать, это оказалось настоящей болью, но я справился со всеми последними версиями пакетов с вышеупомянутым конфигом. Причина была в том, что я мог использовать resol-url-loader для относительного импорта файлов, что, как я подозреваю, связано с этим... прыгая в трассировку стека, я вижу следующий комментарий над этим вызовом, который завершается ошибкой:

/**
 * Rewrites stylesheets by resolving and removing the @import urls that
 * are either relative or don't have a `package:` scheme
 */

Если я сейчас добавлю url-загрузчик, я получу другую ошибку:

Module build failed: ReferenceError: document is not defined

В настоящее время в растерянности относительно того, что делать... кто-нибудь сталкивался с этими проблемами? Пожалуйста, дайте мне знать, если вам нужна дополнительная информация

Answer 1

Я нашел ответ на свой вопрос.

Я использовал новый метод Angular для импорта таблиц стилей через @Component декоратор, и на самом деле это был небольшой сценарий style_url_loader.js, который был виновником ошибки, основной частью Angular 2. Я понятия не имею, почему произошла эта ошибка, но, по моему мнению, нет необходимости в их стиле делать вещи, при условии, что вы правильно масштабируете свой CSS, нет никаких преимуществ и есть некоторые недостатки.

Ergo, я с радостью отключил это и выбрал требование импорта, например const style = require('./app.component.scss'), который мгновенно решил мою проблему.

Надеюсь, это кому-нибудь поможет!