Angular 2組件樣式正在全局應用

我正在嘗試僅爲該組件使用組件特定樣式，但它正用於所有其他組件。我有webpack安裝程序。我嘗試了不同的方法，但它沒有按預期工作。任何人都可以幫我弄清楚這一點。的WebPack配置：Angular 2組件樣式正在全局應用

/* 
    * 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: `.....

來源

2017-10-13 cissharp

確保組件specifuc風格沒有通過全球的風格寫 – JayDeeEss

那麼，你用'封裝配置應用程序：ViewEncapsulation.None'。這意味着你所有的樣式都沒有封裝。刪除這一行並將全局樣式添加到'styles：[...]'節中的'.angular-cli.json'中。 – Daniomi

它不會被覆蓋，但我可以在每個頁面中看到所有樣式： @Danielomi：不使用.angular-cli.json而是使用webpack。 – cissharp

嘗試這樣的：

我有以下位置的全球SCSS文件：

SRC =>應用程式=> app.component.global.scss

app.component.global.scss

body { 
    background: #000 !important; 
}

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

style.scss

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

加您style.scss樣式數組內的角cli.json

"styles": [ 
    "styles.scss" 
]

來源

2017-10-13 13:42:20 Chandru

Angular 2組件樣式正在全局應用

回答

相關問題