Angular+Webpack因CSS注释语法无效持续抛出异常求助

问题根源 #

你看到的警告并非来自你编写的SCSS代码，而是Webpack的自举代码（/******/ (() => { // webpackBootstrap）被错误识别成了SCSS文件内容。这是因为自定义webpack.config.js中新增的SCSS处理规则，和Angular CLI内置的SCSS处理流程发生冲突，导致Webpack打包逻辑混乱，把JS代码当成SCSS解析了。

解决方案 #

1. 移除自定义Webpack中的SCSS规则
   Angular CLI已经内置了完整的SCSS处理链（包含style-loader、css-loader、sass-loader），无需在自定义配置中重复添加。修改你的webpack.config.js，删除module.rules里的SCSS相关规则：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = (config) => ({
    ...config,
    target: 'electron-renderer',
    plugins: [
        ...config.plugins,
        new NodePolyfillPlugin({
            excludeAliases: ["console"],
        }),
    ],
    module: {
        rules: [
            ...config.module.rules
            // 移除此处的SCSS处理规则
        ],
    },
});

2. 检查angular.json的样式配置
   确认angular.json中build选项的样式处理配置正确，比如全局SCSS变量的路径设置：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "stylePreprocessorOptions": {
            "includePaths": [
              "src/styles" // 你的全局SCSS文件所在路径
            ]
          }
        }
      }
    }
  }
}

关于angular.json/tsconfig.json是否会引发问题 #

• angular.json：如果配置错误（比如错误指定样式文件类型、build选项中样式处理参数异常），确实可能导致样式处理流程混乱，进而引发类似警告。
• tsconfig.json：一般不会直接导致该CSS注释警告，但如果compilerOptions中的moduleResolution等配置影响了Webpack的模块解析逻辑，可能间接引发规则冲突，但这种情况概率较低。

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