我正在构建一个angular2应用程序。当我尝试为同一组件加载多个样式表时,我遇到了多个问题。以下是我正在做的代码:
import { Component } from '@angular/core';
@Component({
selector: 'my-tag',
templateUrl: 'my-tag.component.html',
styleUrls: [
'./style1.css',
'./style2.css'
]
})
export class MyTagComponent{}
现在我遇到的问题是:
当我尝试从其他目录包含css文件时,像这样:
styleUrls: [
'./style1.css',
'../public/style2.css'
]
我在浏览器控制台中看到以下错误:
Uncaught Error: Expected 'styles' to be an array of strings.
接下来,我将第二个样式表 style2.css
放在组件的目录中,并编写了第一个代码片段。现在样式被加载了,但是它是全局加载的。第二个样式表具有与 bootstrap 冲突的类名,因此全局应用了第二个样式表的样式,即其他组件的模板也从第二个样式表中进行了样式设置。
按理说,styleUrls
中列出的 URL 应该仅应用于该组件,不会影响其他组件,但事实却并非如此。
请问有没有人能告诉我如何为特定组件加载多个 CSS 文件而不会全局应用?我已经尝试了以下解决方法,但样式仍然被应用到我创建的所有组件上。
styles: [
require('./style1.css').toString(),
require('../public/style2.css').toString()
]
P.S. 我正在将webpack作为项目的模块打包工具。
webpack配置(摘录)
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
styles.css
文件中执行那些导入语句吗? - rosstripistyleUrls
中将值作为数组传递的目的吗?元数据本身就暗示了多个样式表。 - kanra-san