Angular4+Webpack环境下使用ExtractTextPlugin时Sass Sourcemap近乎为空问题

我来帮你搞定这两个关联的问题——先解决styleUrls加app.scss报错的问题，再修复Sass Sourcemap近乎为空的bug。

一、搞定styleUrls引入SCSS报错 #

你现在用import '../../assets/css/app.scss'的方式引入样式，虽然能生效，但放进styleUrls就报错，核心原因大概率是Webpack对Angular组件样式的SCSS处理配置有缺失，或者路径匹配逻辑不对。按下面的步骤调整：

1. 补全Webpack的SCSS Loader配置 #

确保你的Webpack配置里，针对全局SCSS和组件内SCSS做了区分处理，尤其是组件样式需要用raw-loader把编译后的CSS转成字符串，才能被Angular的styleUrls识别：

module.exports = {
  module: {
    rules: [
      // 处理全局SCSS（比如你原来import的app.scss）
      {
        test: /\.scss$/,
        exclude: /src\/app/, // 排除组件目录下的SCSS，单独处理
        use: [
          'style-loader', // 开发环境用，生产环境可以换成MiniCssExtractPlugin.loader
          {
            loader: 'css-loader',
            options: { sourceMap: true } // 必须开，后面要用到Sourcemap
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      },
      // 处理组件内的SCSS（给styleUrls用）
      {
        test: /\.scss$/,
        include: /src\/app/,
        use: [
          'raw-loader', // Angular组件需要把样式转成字符串
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  }
};

2. 修正组件的styleUrls配置 #

把app.scss直接加入styleUrls，同时删掉单独的import语句（避免重复引入样式）：

import { Component, ViewEncapsulation } from '@angular/core';

// 删掉这行：import '../../assets/css/app.scss';

@Component({
  selector: 'appMain',
  styleUrls: [ 
    '../../../../node_modules/ng2-toastr/bundles/ng2-toastr.min.css',
    '../../assets/css/app.scss' // 直接加在这里
  ],
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app.main.component.html'
})
export class AppMainComponent { }

二、修复Sass Sourcemap近乎为空的问题 #

之前用import引入SCSS时Sourcemap异常，本质是Webpack的Sourcemap配置没有贯穿整个loader链，或者缺少关键配置。按下面的步骤调整：

1. 确保所有Loader都开启Sourcemap #

在css-loader和sass-loader里必须显式设置sourceMap: true（上面的配置已经加了），这样每个loader都会生成对应的Sourcemap片段，最终合并成完整的映射文件。

2. 调整Webpack的devtool配置 #

根据你的环境选合适的devtool：

• 开发环境推荐用eval-cheap-module-source-map，构建快且Sourcemap准确；
• 生产环境用source-map，生成独立的Sourcemap文件，不影响代码体积。

module.exports = {
  // 其他配置...
  devtool: 'eval-cheap-module-source-map', // 开发环境
  // devtool: 'source-map', // 生产环境
};

3. 生产环境提取CSS时的额外配置 #

如果用MiniCssExtractPlugin提取单独的CSS文件，一定要给插件开启Sourcemap：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      sourceMap: true // 必须开这个，不然CSS的Sourcemap会丢失
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /src\/app/,
        use: [
          MiniCssExtractPlugin.loader, // 替代style-loader
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]
      }
    ]
  }
};

4. 确保Sass包含原始内容到Sourcemap #

如果用的是dart-sass（推荐替代node-sass），可以在sass-loader里加sourceMapContents: true，确保Sourcemap里包含完整的原始SCSS代码：

{
  loader: 'sass-loader',
  options: {
    sourceMap: true,
    sourceMapContents: true // 开启后原始SCSS内容会被写入Sourcemap
  }
}

三、验证效果 #

1. 重启Webpack开发服务器，让配置生效；
2. 检查组件样式是否正常加载，styleUrls不再报错；
3. 打开浏览器开发者工具，在Elements面板里找到样式，点击旁边的Sourcemap链接，应该能直接跳转到对应的SCSS源文件，而不是空的映射。

内容的提问来源于stack exchange，提问作者christie