Angular 2 组件样式正在全球应用

Question

我正在尝试仅对该组件使用特定于组件的样式，但它正在所有其他组件中使用。我有网络包设置。我尝试了不同的方法，但它没有按预期工作。谁能帮我解决这个问题。Webpack 配置：

    /*
     * to string and css loader support for *.css files
     * Returns file content as string
     *
     */
    {
      test: /.css$/,
      use: ['to-string-loader', 'css-loader']
    },
    /*
     * to string and css loader support for *.css files
     * Returns file content as string
     *
     */
    {
      test: /.(scss|sass)$/,
      use: ['to-string-loader', 'style-loader', 'css-loader', 'sass-loader'],
    },

我的组件声明：

@Component({
  selector: 'outbreak-visualization',
  templateUrl: './outbreak-visualization.component.html',
  styleUrls: ['./outbreak-visualization.component.scss']
})

我的应用组件声明

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.global.scss'
  ],
  template: `.....

Answer 1

尝试如下：

我在以下位置有全局 SCSS 文件：

src => app => app.component.global.scss

app.component.global.scss

body {
    background: #000 !important;
}

我在以下位置有 style.scss 文件：

风格.scss

@import "src/app/app.component.global.scss";

将您的 style.scss 添加到 angular-cli.json 的样式数组中

"styles": [
  "styles.scss"
]