Question

我正在尝试仅为该组件使用组件特定样式，但它正在所有其他组件中使用。我有webpack设置。我尝试了不同的方法，但它没有按预期工作。任何人都可以帮我解决这个问题。 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 =＆gt; app =＆gt; app.component.global.scss

<强> app.component.global.scss

body {
    background: #000 !important;
}

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

<强> style.scss

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

在angular-cli.json

中的styles数组中添加style.scss

"styles": [
  "styles.scss"
]

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

1 个答案: