У меня есть рабочая конфигурация для webpack с Angular, так что файлы scss вставляются в bundle.js
{
test: /\.scss$/,
use: ['raw-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
}
но вместо этого я хочу получить один файл css со всеми scss в приложении, поэтому я использую ExtractTextPlugin, как это
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: ['raw-loader', 'resolve-url-loader', 'sass-loader?sourceMap'],
use: ['resolve-url-loader', 'sass-loader?sourceMap']
})
}
Теперь я не использую «raw-loader», потому что я понимаю, что файлы не нужно вставлять в bundle.js, но я получаю сообщение об ошибке при компиляции.
ERROR in ./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./app/app.component.scss
Module parse failed: /Users/david/Documents/work/my-angular-seed/node_modules/resolve-url-loader/index.js!/Users/david/Documents/work/my-angular-seed/node_
modules/sass-loader/lib/loader.js?sourceMap!/Users/david/Documents/work/my-angular-seed/app/app.component.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .app {
| border: 1px solid red;
| }
Если я использую необработанный загрузчик, сборка идет нормально, но затем я получаю сообщение об ошибке при загрузке index.html.
Uncaught Error: Expected 'styles' to be an array of strings.
Кто-нибудь знает, как это исправить и почему это происходит? Спасибо!
РЕДАКТИРОВАТЬ
Я проверял немного больше, и я думаю, что знаю, в чем проблема, но я не знаю, как ее исправить.
Если я использую эту конфигурацию
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
создается app.css, так что все хорошо. Но затем, если я проверю bundle.js, компонент был преобразован в этот
AppComponent = __decorate([
core_1.Component({
selector: 'app-root',
styles: [__webpack_require__(23)],
template: "\n <div class=\"app\">\n Hello!\n </div>\n "
})
], AppComponent);
И если я проверю модуль 23, я увижу, что он пустой
/* 23 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }),
Итак, я предполагаю, что это то, на что жалуется angular, стили - это пустой массив. Я думаю, что здесь нужно полностью удалить тег стилей, так как css используется как внешний отдельный файл, верно? есть ли способ исправить это?
