Angular 4 webpack sass sourcemap 文件几乎为空（使用 ExtractTextPlugin）

Question

我正在引用 sass 文件 (app.scss) 作为导入（将其包含在 styleUrls 数组中时出现错误）

import { Component, ViewEncapsulation } from '@angular/core';
import '../../assets/css/app.scss';

@Component({
    selector: 'appMain',

    styleUrls: [
        '../../../../node_modules/ng2-toastr/bundles/ng2-toastr.min.css',
    ],
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.main.component.html'
})
export class AppMainComponent {
}

在我当前的配置中使用 webpack，其中包括使用 ExtractTextPlugin，我生成的 app.css.map 文件基本上是空的。看起来像：

{"version":3,"sources":[],"names":[],"mappings":"","file":"app.css","sourceRoot":""}

我需要更改什么才能正确生成源映射文件？我的 webpack.config.js 文件如下所示：

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const extractCSS = new ExtractTextPlugin('app.css');
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, include: [/ClientApp/, /$$_gendir/], use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                {
                    test: /\.scss$(\?|$)/,
                    exclude: /node_modules/,
                    use: extractCSS.extract({
                        use: [{
                            loader: "to-string-loader"
                        }, {
                            loader: isDevBuild ? 'css-loader' : 'css-loader?minimize', options: {
                                sourceMap: true
                            }
                        }, {
                            loader: 'sass-loader', options: {
                                sourceMap: true
                            }
                        }] })
                }
            ]
        },
        plugins: [     
            extractCSS,
            new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
    });
    return [clientBundleConfig];
};

Answer 1

能够使用您提到的 scss 规则重新创建您的场景：

您的规则：

 {
                    test: /\.scss$(\?|$)/,
                    exclude: /node_modules/,
                    use: extractCSS.extract({   
                        use:[ {loader: 'to-string-loader'},
                        {
                            loader: true ? 'css-loader' : 'css-loader?minimize', options: {
                                sourceMap: true
                            }
                        }, {
                            loader: 'sass-loader', options: {
                                sourceMap: true,
                            }
                        }] }
                      )
                }

app.css.map :

{"version":3,"sources":[],"names":[],"mappings":"","file":"app.css","sourceRoot":"webpack:///"}

By removing the to-string-loader for scss did the trick for me !!!

修改后的规则：

{
                    test: /\.scss$(\?|$)/,
                    exclude: /node_modules/,
                    use: extractCSS.extract({   
                        use: [
                        {
                            loader: true ? 'css-loader' : 'css-loader?minimize', options: {
                                sourceMap: true
                            }
                        }, {
                            loader: 'sass-loader', options: {
                                sourceMap: true,
                            }
                        }] }
                      )
                }

已解决app.css.map

{"version":3,"sources":["./src/assets/css/src/assets/css/app.scss"],"names":[],"mappings":"AAAA;EACI,uBAAsB,EACzB","file":"app.css","sourcesContent":[".ampati{\n    background-color: blue;\n}\n\n.hareesh{\n    @extend .ampati;\n}\n\n\n// WEBPACK FOOTER //\n// ./src/assets/css/src/assets/css/app.scss"],"sourceRoot":"webpack:///"}

插件与您使用的 [ExtractTextPlugin] 和 SourceMapDevToolPlugin 相同，保留在插件列表中（来自 ng eject） . 我相信这将主要解决您面临的问题!!

希望这对您有所帮助！！！如果不是，请提供您的代码库 git url

参考：https://github.com/webpack-contrib/sass-loader/issues/309

Angular 4 webpack sass sourcemap 文件几乎为空（使用 ExtractTextPlugin）

Angular 4 webpack sass sourcemap file almost empty (using ExtractTextPlugin)

source-maps

angular

webpack-4