Question

我的CSS不再用了，因为我正在使用angular4。

目前正在构建应用程序的基本模板，由于Angular生成的Component DOM元素，我在DIVS上无法正确应用CSS时遇到了一些困难。

这就是我想要的（1）

 <div class="page-container ">
   <div class="page-content-wrapper">

    <div class="content">
        Content here
    </div>

    <div class="container-fluid container-fixed-lg footer">
        Footer here
    </div>

  </div>
</div>

这就是我所拥有的（2）

 <div class="page-container ">
   <div class="page-content-wrapper">

    <div class="content">
      <router-outlet>
        Content here
      </router-outlet>
    </div>

    <ae-footer-composant>
      <div class="container-fluid container-fixed-lg footer">
        Footer here
      </div>
    </ae-footer-composant>
  </div>
</div>

这是我的index.html

<!doctype html>
<html lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta charset="utf-8" />
    <title>Pages - Admin Dashboard UI Kit - Blank Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
    <link rel="apple-touch-icon" href="pages/ico/60.png">
    <link rel="apple-touch-icon" sizes="76x76" href="pages/ico/76.png">
    <link rel="apple-touch-icon" sizes="120x120" href="pages/ico/120.png">
    <link rel="apple-touch-icon" sizes="152x152" href="pages/ico/152.png">
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta content="" name="description" />
    <meta content="" name="author" />

    <base href="/">

    <!--[if lte IE 9]>
    <link href="assets/plugins/codrops-dialogFx/dialog.ie.css" rel="stylesheet" type="text/css" media="screen" />
    <![endif]-->

    <!-- jQuery -->
    <script type="text/javascript" src="/assets/plugins/jquery/jquery-1.11.1.min.js" ></script>
  </head>
  <body class="fixed-header">

    <app-root></app-root>


    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="/assets/plugins/pace/pace-theme-flash.css"  />
    <link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrapv3/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/assets/plugins/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-scrollbar/jquery.scrollbar.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="/assets/plugins/select2/css/select2.min.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/assets/plugins/switchery/css/switchery.min.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="/assets/pages/css/pages-icons.css">
    <link rel="stylesheet" type="text/css" href="/assets/pages/css/pages.css" class="main-stylesheet"/>
    <!--<link rel="stylesheet" type="text/css" href="/assets/pages/condensed/css/pages.css" class="main-stylesheet"/>-->
    <link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.min.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-tag/bootstrap-tagsinput.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/plugins/dropzone/css/dropzone.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-datepicker/css/datepicker3.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/assets/plugins/summernote/css/summernote.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" media="screen">

    <link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-datatable/media/css/dataTables.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-datatable/extensions/FixedColumns/css/dataTables.fixedColumns.min.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/plugins/datatables-responsive/css/datatables.responsive.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="/assets/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/elium-style/css/elium.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/elium-style/css/pages.css"/>

  </body>
</html>

这是我的app.component.html

<!-- START PAGE-CONTAINER -->
<div class="page-container ">

  <!-- START HEADER -->
  <ae-header-composant></ae-header-composant>

  <!-- START PAGE CONTENT WRAPPER -->
  <div class="page-content-wrapper">

    <div class="content">
      <router-outlet></router-outlet>
    </div>

    <ae-footer-composant></ae-footer-composant>
  </div>
  <!-- END PAGE CONTENT WRAPPER -->

</div>
<!-- END PAGE CONTAINER -->

<ae-quickview-composant></ae-quickview-composant>
<ae-overlay-composant></ae-overlay-composant>
<ae-css-composant></ae-css-composant>

我的CSS适用于（1），但不适用于（2），因为生成了角度的DOM ...

我已经尝试过以下操作，但仍然无法正常工作......

import { Component, OnInit, ViewEncapsulation} from '@angular/core';  

 @Component({
      selector: 'ae-sidebar-composant',
      templateUrl: './sidebar-composant.component.html',
      styleUrls: ['./sidebar-composant.component.css'],
      encapsulation: **ViewEncapsulation.None**,
    })
    export class SidebarComposantComponent implements OnInit {

      constructor() { }

      ngOnInit() {
      }
}

有没有人有想法？感谢的

Answer 1

angular使用webpack。您的webpack.config.js文件中必须有一个css加载程序。如果正确，请检查您是否有src / style.css文件，您可以在其中导入其他样式。

或者你可以在webpack.config.js中添加你的css，如下所示：

 "styles": [
      "./src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css", // if you have setted up ng-bootstrap ...
    ]

我的CSS不再用了，因为我正在使用angular4

1 个答案: