Sass 在 NativeScript 中，angular 用于特定于组件的 .scss

Question

我正在尝试使用 nativescript-dev-sass 插件，它成功地从我的项目 (app.scss -> app.css)。但我想使用组件特定的 css 文件。也就是说，在 "app" 文件夹中，我有组件文件夹 "login"，它包含 login.scss。（应用 -> 登录 -> 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']
})

注意 styleURLs 在这里引用了 .css 文件。即使您将所有 css 写入 .scss 文件而不是 .css 文件。例如，当您使用 tns run android 构建项目时，.scss 中的内容将被编译下来，并且内容会自动添加到您的 .css 文件中，您无需执行任何操作，假设这个文件存在。

此外，假设您要创建一个包含通用样式和变量的 app/theme.scss 文件。您可以在您的 login.scss 中导入此 theme.scss，从而在您的特定组件中访问这些样式

component.scss

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

Sass 在 NativeScript 中，angular 用于特定于组件的 .scss

Sass in NativeScript with angular for Component specific .scss

sass

nativescript

angular2-components