如何在 Angular 组件 + webpack 中预处理并正确包含 scss答案

【问题标题】：How to preprocess and correctly include scss in angular component + webpack如何在 Angular 组件 + webpack 中预处理并正确包含 scss
【发布时间】：2018-04-30 06:54:33
【问题描述】：

我正在配置 webpack 来构建我的 Angular 应用程序。现在我被困住了，如何预处理 scss 并将其包含在角度组件中。

在组件中，我是直接引用scss。

在 webpack 中，我有用于 scss 和 css 的加载器。

Webpack 输出正在构建到 dist 文件夹中。但是在我看到的开发工具中，它试图直接包含这个 app.component.scss 文件

您能帮我解决这个问题吗？我究竟做错了什么？感谢您的任何提示。

【问题讨论】：

标签： angular webpack sass

【解决方案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']
})

它按预期工作。试试看告诉我

【讨论】：

它仍在尝试查找 dist/app.component.scss 文件.. :( 但如果我是正确的，它应该是 js 包的一部分
你能用你的代码创建一个 plunker 让我看看吗？你能检查一下你在哪里引用了你的 scss 文件...