Question

默认情况下，Angular 2将CSS编译为JavaScript，尤其是在Angular-CLI中使用WebPack时。我宁愿这不会因为几个原因而发生。

第一个原因是，当我开发时，我发现能够在开发人员工具中确切地看到特定样式规则来自哪个样式表以及它所在的行号是非常有帮助的。第二个原因是我认为将CSS编译成代码有点错过了好的CSS，这就是你可以使用不同的样式表，并使用相同的标记具有完全不同的外观和感觉。

我可以设置一个标志，将CSS保留在.css文件中，它属于IMO吗？

Answer 1

这是封装组件的重点。

一个组件应该有它自己封装的样式，因此可以随样式一起提供。

想象一下，您想要发布一个供其他人使用的组件，不应该有它自己的风格吗？

这意味着Angular需要一种方法将这些css链接到组件，从而将它们分成块并将它们注入head标签。

要解决您的问题，您有几个选择：

1-不使用仿真封装：

默认情况下，组件有一个名为encapsulation的属性，该属性设置为Emulated，您需要将其更改为None：

@Component({
   encapsulation:ViewEncapsulation.None
})

然后，你可以把你所有的css放在你自己的头像标签中，就像你使用普通的html页面一样。

2-如果问题是主题，您可以使组件成为主题。

您可以为组件设置主题属性，然后根据该更改设置样式：

@Component({
   selector:'my-component',
   styles:[
    `
       :host{
          [theme="blue"]{

              change what ever you want : 

              h1{
                color:blue; 
              }
           }

       }
    `
  ]
})

然后，使用这个组件就像：

  <my-component [attr.theme]='"blue"'></my-component> // would be blue theme
  <my-component></my-component> // would be default

Answer 2

转到您的基本Html文件（注入根模块，主应用程序的位置）并链接标题部分中的CSS样式表。

Webpack不会将其包含在已编译/组合的css文件中，该文件将被注入页面。 css文件仍将在运行时包含在浏览器中。

<html>

<head>
  <base href="/">
  <meta charset="utf-8">
  <title>dummy</title>
  <meta name="viewport" content="width=device-width">

//was not injected/modified by webpack
  <link rel="apple-touch-icon" sizes="57x57" href="app/images/apple-icon-57x57.png">

//webpack's injected this below from other components's imported/inline css rules
<link href="index-c2cacb5fa3dfbca6116f4e4e63d5c3c7.css" rel="stylesheet"></head>

Answer 3

我也使用angular-cli（v1.0.0-beta.22）。当我准备构建生产时，我运行以下命令：

ng build -prod -aot

这将生成我所有的生产就绪文件（捆绑，树震动和缩小等）。特别值得注意的是，它将生成两个版本的样式表。

js中的一个：

styles.b2328beb0372c051d06d.bundle.js

另一个版本是普通的CSS：

styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css

我使用gulp在css文件上运行一些后处理，并使用css版本进行生产构建。我不确定是否同样适用于延迟加载（cli将产生不同的块），但是当没有使用延迟加载时它确实有效（我还没有启动生产 - 已准备好的项目，但延迟加载）。

我还尝试了使用JiT编译的构建：

ng build -prod

它还生成了css样式表的原始/缩小版本。

现在，我确信下面的内容不起作用：

ng build

这将生成嵌入js文件styles.bundle.js中的所有css。

由于您希望在开发期间使用原始css文件，我能想到的唯一解决方法是运行 ng build -prod 以获取CSS文件。手动将其复制/粘贴到资源文件夹中。在文件上运行“format”以取消文件的缩小。然后使用修改后的index.html文件进行正常构建，引用原始css文件，并删除styles.bundle.js脚本引用。不漂亮，但它可能会奏效。

Answer 4

使用angular-cli 1.6.5，你可以这样做：

ng serve --extract-css

您仍将拥有样式封装功能，但devtools现在将指向组件css源文件。

Answer 5

在html示例中放置一个包装类 - <div class="component-1-wrapper"> all yout html here inside component-1-wrapper </div>
按以下方式构建您的sass（scss）。由于您的样式包含在component-1-wrapper中，因此仅适用于component-1-wrapperclass .component-1-wrapper{ // all the styles for component-1 here .class-hello{ // styles } }
你可以用sass编译你的css并把所有的css（由模块分开）放在单独的文件夹中。用_开始文件名，sass可以导入它们：

您可以在app.ts文件@component({ styleUrls:['styles/styles-main.scss']})
样式表将以这种方式构建，并且单个组件的类样式将应用于特定组件，因为html中有一个包装类

希望它有帮助!!!!!!

在Angular 2 / Angular-CLI中保持CSS不受JS限制

5 个答案: