在NativeScript中使用角度为特定于组件的.scss

Question

我正在尝试使用nativescript-dev-sass插件，它在我的项目（app.scss - > app.css）中仅在app文件夹（NOT子文件夹）中成功创建了“.css”文件。但我想使用组件特定的css文件。也就是说，在“app”文件夹里面我有组件文件夹“login”，它包含login.scss。 （app - > login - > login.scss）。这个login.scss没有创建login.css。

是不是可以像这样使用它？我应该将所有的CSS添加到“app”文件夹中，并在我创建的所有组件中将路径设置为css吗？请帮忙。

Answer 1

有可能这样做。

遵循官方文档中的Nativescript SASS用法 - https://docs.nativescript.org/ui/theme#sass-usage

然后，当您在单独的文件夹中创建新组件时，您将拥有以下内容。

结构体

login/
    login.component.ts
    login.component.html
    login.component.scss
    login.component.css

component.ts

您的component.ts应如下所示：

@Component({
    selector: 'login',
    moduleId: module.id,
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})

请注意，styleURL在此引用.css文件。即使你将.scss文件中的所有css写入.css文件。例如，当您使用tns run android构建项目时，.scss中的内容将被编译下来，并且内容会自动添加到.css文件中，而不必执行任何操作（假设此文件存在）。

另外，假设您要创建一个app / theme.scss文件，该文件由常见样式和变量组成。您可以在login.scss中导入此theme.scss，以便在特定组件中访问这些样式

component.scss

@import '../../theme';