CSS在Angular 5中没有反映出来。

17 浏览
0 Comments

CSS在Angular 5中没有反映出来。

我正在尝试在Angular组件中添加CSS，但是不起作用。我正在使用ngx-bootstrap的tabmodule Tabs。

以下是我的代码：

.component.html


        
            {{tab.title}} 
            
{{tab.content}}

在DOM中会创建类似以下内容的东西：

现在，当我尝试添加CSS，如下所示，似乎没有效果。边框底部没有应用：

.tab-container {
    ul {
      &.nav-tabs {
        border-bottom: 4px solid red;
      }
    }
}

更新

将封装设置为ViewEncapsulation.None对我有效，但这会引起我的组件出现其他问题。如果有人能找出原因为什么不起作用，那就太好了。

0

2 答案

0 Comments

问题原因：如果项目中存在yourStyle.css或your.component.css文件，项目会读取yourstyle.css文件。因此，如果在独立组件中覆盖样式，有时会无效。因此，要么在.component.html文件中更改样式，要么在yourstyle.css文件中更改。

解决方法：要在Angular 5中解决CSS更改不反映的问题，有两种方法可供选择。

方法一：修改.component.html文件中的样式

在你的独立组件的.component.html文件中直接更改样式。这样做的好处是，你可以直接在组件内部修改样式，而不会影响到其他组件。

例如，在.component.html文件中添加以下代码：

方法二：修改yourstyle.css文件中的样式

如果你希望在多个组件中共享样式，可以将样式更改添加到yourstyle.css文件中。这样做的好处是，你只需在一个地方更改样式，所有使用该样式的组件都会受到影响。

例如，在yourstyle.css文件中添加以下代码：

.your-class {
  color: red;
}

无论你选择哪种方法，都应该能够解决CSS更改不反映的问题。请注意，如果你修改了样式后仍然没有反映出来，可能还需要清除浏览器缓存，或者重新启动开发服务器。

0
0 Comments

在Angular 5中，CSS更改不反映的原因可能是由于项目中使用的CSS文件没有正确配置。解决这个问题的方法是将CSS文件改为SCSS文件，并在组件中正确引用。

首先，建议使用SASS或其他类似的SCSS文件。通过使用.scss而不是.css文件，可以从全局样式和分隔/封装样式中获得最大的好处。

在每个组件的scss文件中导入一个root.scss文件，以避免css代码重复。每个组件都包含一个作为根div的

。这意味着一些全局样式规则将被应用，但其余的css将在该组件的component.scss中。

为了使项目更符合SCSS规范，Angular CLI提供了两种方法：创建一个以scss为基础的项目，或将现有的css项目转换为scss。

对于旧项目：

1. 将默认的样式扩展更改为scss。在.angular-cli.json（Angular 5.x及更早版本）或angular.json（Angular 6+）文件中手动更改，或运行以下命令：ng config defaults.styleExt=scss。

2. 将现有的.css文件重命名为.scss文件（例如styles.css和app/app.component.css）。

3. 在angular.json文件的apps[0].styles中手动更改文件扩展名。

4. 在组件中将styleUrls更改为匹配新文件名的值。

对于新项目：

使用以下命令创建一个新项目，并将样式设置为scss：ng new your-project-name --style=scss。

如果您想将默认样式设置为scss，可以运行以下命令：ng config --global defaults.styleExt=scss。

来源：https://stackoverflow.com/a/45255290/4770754

对于scss成为默认样式的好处有很多，特别是对于新手程序员来说，但是浏览器不原生支持SASS和LESS的原因可能是：https://www.quora.com/Why-dont-browsers-support-SASS-LESS-natively

0