Webpack & Angular: «Не удалось разрешить ресурс ./foo.css относительно /project/src/foo.component.ts»

Question

Я пытаюсь использовать Webpack вместо Gulp, компонент Angular выглядит следующим образом:

@Component({
    selector: 'application-databasebrowser',
    templateUrl: './core/applications/databasebrowser/databasebrowser.html',
    styleUrls: ["./core/applications/databasebrowser/databasebrowser.css"],
})

При сборке с помощью Webpack я получаю следующую ошибку:

ОШИБКА в: Не удалось разрешить ресурс ./core/applications/databasebrowser/databasebrowser.css относительно /wrsoftware/cOS/Juno/src/client/core/applications/databasebrowser/databasebrowser.component.ts

Проект использует файлы s css в источнике, но даже если я переименую «databasebrowser.s css» в папке sr c на «databasebrowser. css», ошибка останется прежней.

Конфигурация веб-пакета:

// const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
const { AngularCompilerPlugin } = require('@ngtools/webpack');


module.exports = function () {
    return {
        mode: 'development',
        entry: './src/client/core/cos.entry.ts',
        // watch: true,
        output: {
            path: __dirname + '/dist/client',
        },
        resolve: {
            extensions: ['.ts', '.js', '.scss']
        },
        module: {
            rules: [
                { test: /\.ts$/, loaders: ['@ngtools/webpack'] },
                { test: /\.css$/, loader: 'raw-loader' },
                { test: /\.html$/, loader: 'raw-loader' },
                {
                    test: /\.(scss|sass)$/,
                    use: [
                        { loader: 'style-loader' },
                        { loader: 'css-loader' },
                        { loader: 'sass-loader' }
                    ]
                }
            ]
        },
        plugins: [
            new CopyWebpackPlugin([
                // { from: 'src/assets', to: 'assets'}
            ]),
            new ScriptExtPlugin({
                defaultAttribute: 'defer'
            }),
            new AngularCompilerPlugin({
               tsConfigPath: './tsconfig.json',
               entryModule: './src/client/core/cos.module.ts',
               sourceMap: true
            })

        ]
    };
}

Answer 1

Хорошо, я получил решение.

В то время как gulp хочет абсолютный путь, webpack хочет относительный путь И хочет файл s css, а не файл css, как это делает gulp.

Таким образом, решение состоит в том, чтобы изменить компонент на:

@Component({
    selector: 'application-databasebrowser',
    templateUrl: './databasebrowser.html',
    styleUrls: ["./databasebrowser.scss"],
})