Angular 5中使用Webpack时:host选择器未转换为组件实体问题

我之前也踩过一模一样的坑！单纯用sass-loader只能完成SCSS到CSS的转译，但:host、:host-context这类Angular组件专属的伪选择器，得靠Angular官方的StyleCompiler（也就是你提到的shadow_css.ts里的核心逻辑）来处理。要实现和Angular CLI完全一致的样式处理，关键是用上Angular官方的Webpack插件@ngtools/webpack，而不是单独用sass-loader处理组件样式。

下面是亲测有效的配置方案：

1. 安装必要依赖 #

首先确保安装Angular官方的Webpack工具包，它封装了所有CLI用到的编译逻辑：

npm install @ngtools/webpack @angular/compiler-cli --save-dev

2. 修改Webpack配置文件 #

替换原有样式加载器逻辑 #

你之前的配置里应该是用sass-loader直接处理.scss文件，现在要让@ngtools/webpack接管组件样式的编译——它会自动处理:host伪选择器转换、SCSS转译，以及Angular的样式封装（生成[_nghost-xxx]这类属性选择器）。

修改后的核心配置如下：

const { AngularWebpackPlugin } = require('@ngtools/webpack');

module.exports = {
  // ... 其他基础配置（入口、输出等）
  plugins: [
    new AngularWebpackPlugin({
      tsconfig: './tsconfig.json', // 指向你的项目tsconfig文件
      compilerOptions: {
        enableIvy: true // 如果你用的是Ivy编译器，默认开启即可
      }
    }),
    // ... 其他插件（如HtmlWebpackPlugin等）
  ],
  module: {
    rules: [
      // 所有.ts文件交给@ngtools/webpack处理，它会自动识别组件的样式资源
      {
        test: /\.ts$/,
        loader: '@ngtools/webpack',
      },
      // 仅处理全局样式（非组件内的样式，比如styles.scss）
      {
        test: /\.scss$/,
        exclude: /src\/app/, // 排除组件目录下的样式文件
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
      // 组件内的.scss文件无需单独配置加载器，@ngtools/webpack会自动处理
    ]
  }
};

关键说明 #

• @ngtools/webpack会读取你的tsconfig.json，按照Angular的编译规则处理所有组件资源，包括解析组件元数据里的styleUrls，把.component.scss编译成带封装标记的CSS。
• 全局样式可以继续用原有sass-loader链处理，因为它们不需要组件封装逻辑。

3. 确认组件元数据配置 #

检查你的app.component.ts，确保样式引用和封装模式正确：

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

@Component({
  selector: 'ng-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.Emulated // 默认值，确保开启样式封装
})
export class AppComponent {}

ViewEncapsulation.Emulated是:host伪选择器生效的前提，如果设置成None，:host不会被转换为组件属性选择器。

4. 对比ng eject配置验证 #

你提到用ng eject拿到了能正常工作的配置，打开后会发现核心就是用了@ngtools/webpack插件，所有.ts文件都由它处理，没有单独的组件样式加载器规则——因为这个插件已经整合了SCSS转译、伪选择器处理等所有CLI用到的逻辑。

配置完成后重新构建，你就能看到:host被正确转换成[_nghost-c0]这类组件专属选择器，和Angular CLI的处理结果完全一致了！

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