首页 文章

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

提问于
浏览 次
0

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

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

enter image description here

在webpack中我有scss和css的加载器 .

enter image description here

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

enter image description here

你能帮助我继续解决这个问题吗？我究竟做错了什么？谢谢你的任何暗示 .

angular webpack sass

1 回答

  • 0

    这是我的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']
})

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

    回复于

相关问题