app.css 上的更改不适用于 GUI答案

【问题标题】：Changes on app.css are not applied on GUIapp.css 上的更改不适用于 GUI
【发布时间】：2016-12-03 22:06:46
【问题描述】：

我正在尝试更改 NativeScript 上的按钮默认外观 core.light.css 所以在 @import 之后我添加了一些规则。有些正在应用，有些则没有。我已经做了几年网络开发人员，所以我对 CSS/HTML 非常熟悉，但在这里我真的很想念一个浏览器检查器来找出我的错误在哪里。

这是 app.css 中的 CSS 规则：

.nav Button {
  border: 1px solid grey;
  border-radius: 3px;
  margin: 5px;
  padding: 5px;
}

这就是我在 page.component.html 上的内容：

<StackLayout class="nav">
    <Button text="First" 
        [nsRouterLink]="['/first']"></Button>
    <Button text="Second"
        [nsRouterLink]="['/second']"></Button>
    <Button text="Third"
        [nsRouterLink]="['/third']"></Button>
    <Button text="Fourth"
        [nsRouterLink]="['/fourth']"></Button>
</StackLayout>

这就是它在 iOS 模拟器上的样子：

1px solid 的边界在哪里？我在这里错过了什么？

【问题讨论】：

标签： css nativescript angular2-nativescript

【解决方案1】：

在我这边，实时同步 CSS 文件可以正常工作。但是请记住，NativeScript 仅支持 CSS 的一个子集，并且来自 web 的一些语法在 NativeScript 中不适用

so 而不是 border: 1px solid gray;

使用

.nav Button {
    border-width: 1;
    border-color: gray;
    border-radius: 20;
}

支持的 CSS 属性列表可以在here找到

【讨论】：

谢谢尼克。我也已经改变了。在一些元素中还有一些其他规则也没有得到应用。是否是我的项目设置在保存时忽略了某些更改以节省更新时间？
我怀疑它是由设置引起的 - 为 livesync 引入了一些修复，但为了应用它们，您需要 @next 版本（npm uninstall -g nativescript .... npm install -g nativescript @next ...删除平台文件夹并重新运行livesync）。

【解决方案2】：

您是否尝试将子选择器添加到您的 CSS 中？ https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors 所以空间应该可以工作：/ https://docs.nativescript.org/ui/styling#hierachical-selector-css-combinators 我只使用了> 选择器。如果您认为它没有按应有的方式工作，请提交错误。

【讨论】：

刚刚按照您的建议尝试了“>”子选择器，但它也不起作用。很可能是我的错误，我没有找到它，所以我会在提交错误之前继续尝试。我真的很想念这里的 Chrome 检查器...
核心团队专注于 2.5 的调试和工具，曾经有传言说检查员很快就会出现，所以我们希望它是下个月的版本 :) 我以前在这里感受到过你的痛苦.所以孩子选择器只是第一个孩子，你拥有的空间应该做所有孩子。我从来没有尝试过，所以我不能确定。我会尝试按照其他答案的建议添加一个类，至少如果选择器是一个错误，它是一种解决方法
已经尝试在这些按钮上使用一个类，但它也不起作用。我在 app.css 上确实有一个 Page { color:darkred; } 规则，正如您在图像上看到的那样，它工作正常，因此标签选择器似乎不是问题。

【解决方案3】：

解决了。在此处发布解决方案以帮助未来的受害者。

显然，以前尝试过的所有配置都应该可以正常工作。常用的规则.nav Button、子选择器.nav > Button、.navbutton应用于Button元素的类……这些都可以。虽然我不得不按照@Nick 在我接受的答案中的建议将border: 1px solid grey; 分成三行（border-width、border-color 和border-style）。

起初我使用tns livesync ios --emulator --watch 是为了立即查看更改。当未显示更改时，我关闭了应用程序，输入 tns run ios 并显示了更改，但此元素除外。

所以我做了tns platform remove ios、tns plantform add ios，最后是tns run ios。这解决了问题。我认为有某种持久性或缓存选择了该特定元素只是为了惹恼我。

【讨论】：