Как предварительно обработать и правильно включить scss в угловой компонент + веб-пакет

Question

Я настраиваю веб-пакет для создания своего углового приложения. Теперь я застрял, как предварительно обработать scss и включить его в угловой компонент.

В компоненте я ссылаюсь на scss напрямую.

В веб-пакете у меня есть загрузчики для scss и css.

Выход Webpack встраивается в папку dist. Но в dev-tools я вижу, что он пытается напрямую включить этот файл app.component.scss

Не могли бы вы помочь мне продвинуться в решении этой проблемы? Что я делаю неправильно? Спасибо за любую подсказку.

Answer 1

Вот мой webpack.config.js. Работает нормально

module: {
        rules: [
            { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "to-string-loader"
                    },
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    }, {
                        loader: "css-loader" // translates CSS into CommonJS
                    }, {
                        loader: "sass-loader" // compiles Sass to CSS
                    }]
            },
            {
                test: /\.(png|jpg|jpeg|woff|eot|ttf|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 105000, // if less than 10 kb, add base64 encoded image to css
                            name: "assets/[hash].[ext]" // if more than 10 kb move to this folder in build using file-loader
                        }
                    }]
            }, {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react-app']
                    }
                }
            },
            {
                test: /\.tsx?$/, use: [
                    {
                        loader: "awesome-typescript-loader"
                    }]
            },
        ]
    },

Я только что включил свой CSS в мой корневой компонент

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./../styles/app.scss']
})

Работает, как и ожидалось. Попробуйте и дайте мне знать