我的 CSS 不再工作，因为我使用的是 angular4。
目前正在构建应用程序的基本模板，由于生成了 Angular 的组件 DOM 元素，我在 DIVS 上无法正确应用 CSS 时遇到了一些困难。
这就是我想要的(一)
<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>
这就是我的(二)
<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 有 Angular ......
我已经尝试了以下方法，但仍然无法正常工作......
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() {
}
}
有人有想法吗？ 谢谢
最佳答案
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 - 我的 CSS 不再工作，因为我使用的是 angular4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45532065/