Angular不会加载styles.css
[英]Angular won't load styles.css
问题描述
I'm building a simple angular app with bootstrap . 
我正在使用bootstrap构建一个简单的angular应用bootstrap 。 It seems that the base index.html won't load the styles.css . 看来基本的index.html不会加载styles.css 。 If I put the css code right into html tags it works like a charm. 如果我将css代码直接放入html标记中，它的工作原理就像一个魅力。 I tried to reboot the app and clear the browser cache, it seems to just ignore the style file. 我试图重新启动应用程序并清除浏览器缓存，似乎只是忽略了样式文件。 When I wrote the css file for the first time it worked, hence I thought that was a cache problem. 当我第一次写css文件时，它起作用了，因此我认为这是一个缓存问题。 I changed nothing of the Angular project base structure. 我没有更改Angular项目基础结构。
Here's my code. 这是我的代码。
index.html 的index.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>
styles.css styles.css的
body {
background-color: #d9d9d9;
}
.container{
width: 70%;
max-width: 100%;
background-color: white;
margin-left: auto;
margin-right: auto;
}
Here's the version that works instead. 这是替代版本。
index.html 的index.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 .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]
The code is pretty trivial but still. 该代码非常简单，但仍然如此。
Thanks in advance. 提前致谢。
3 个解决方案
解决方案1
1 2017-07-28 14:26:27
You need to reference your stylesheet in yout .angular-cli.json like this : 您需要像这样在yout .angular-cli.json中引用样式表：
"styles": [
"path/to/style.css"
],
解决方案2
0 2017-07-28 14:26:33
Check your angular-cli.json , under "apps" you should see something like this 检查您的angular-cli.json ，在"apps"您应该会看到类似以下的内容
"styles": [
"styles.css"
]
add it if its not there 如果不存在则添加
解决方案3
-1 2017-07-28 14:20:46
Well, in your index.html, I don't see any <link> to that file... are you sure you didn't leave it out? 好吧，在您的index.html中，我看不到该文件的任何<link> ...您确定没有遗漏吗？ You still need to link the stylesheet, Angular won't do that automatically for you. 您仍然需要链接样式表，Angular不会自动为您完成此操作。
Try: 尝试：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.