Question

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

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

在webpack中，我有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']
})

它按预期工作。试一试，让我知道

如何在角度组件+ webpack中预处理并正确包含scss

1 个答案: