ess*_*ara 8 html css twitter-bootstrap angular
我正在构建一个简单的angular应用程序bootstrap。看来基地index.html不会加载styles.css。如果我将 css 代码直接放入 html 标签中，它就会像魅力一样工作。我尝试重新启动应用程序并清除浏览器缓存，它似乎只是忽略样式文件。当我第一次编写 css 文件时它起作用了，因此我认为这是一个缓存问题。我没有更改 Angular 项目基础结构。
这是我的代码。
索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ReagApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container">
<app-root></app-root>
</div>
</body>
</html>
样式.css
body {
background-color: #d9d9d9;
}
.container{
width: 70%;
max-width: 100%;
background-color: white;
margin-left: auto;
margin-right: auto;
}
这是有效的版本。
索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ReagApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style=" background-color: #d9d9d9;">
<div class="container"
style="width: 70%;
max-width: 100%;
background-color: white;
margin-left: auto;
margin-right: auto;">
<app-root></app-root>
</div>
</body>
</html>
.angular-cli.json
[other things]
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environmentSource": "environments/environment.ts",
[other things]
代码非常简单，但仍然很简单。
提前致谢。
检查你的angular-cli.json，在"apps"你应该看到这样的东西
"styles": [
"styles.css"
]
如果不存在则添加它
好吧，在你的index.html 中，我没有看到<link>该文件的任何内容......你确定你没有遗漏它吗？您仍然需要链接样式表，Angular 不会自动为您执行此操作。
尝试：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ReagApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<app-root></app-root>
</div>
</body>
</html>