I created a new project using ng new hello-world.
After running the project using ng serve I am getting below source code from browser.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloWorld</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>
<app-root></app-root>
<script src="runtime.js" defer></script><script src="polyfills.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script></body>
</html>
How <link rel="stylesheet" href="styles.css"> added here ?
How can I remove it ?
What should I do if I need to add another Style sheet like this one ?
The CSS is automatically injected in your index.html by Angular. To remove this behavior, remove styles.css from styles in your angular.json file.
To add new styles, add the path to your other CSS in styles:
"styles": [
"assets/css/custom-styles-1.css",
"assets/css/custom-styles-2.css"
],
For more informations, check Angular Workspace Configuration.
Related
I am using the Live Sass Compiler plugin for VScode, and when I start to watch, I get a strange terminal error and the files won't link. It all seems to be linked properly if the compiler were to work, but the .html file won't update with my custom.scss changes.
The terminal warning says something about in the bootstrap files, and I think that may be part of it?
This is my index.html head:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="./style/custom.css">
<title>New Document</title>
</head>
And my:
custom.scss file and the terminal error message
Not sure what to do at this point?
Paste this code in the head tag and try again.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
I want to make login page using bootstrap and react. I use the following style from official page. I added these all bootstrap and css files in index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="all.css" rel="stylesheet">
<link href="autorization.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="bootstrap.bundle.min.js"></script>
<script src="jquery.min.js"></script>
</html>
But result is another than when I open throug a regular html page. The font is different.
This is how it should be:
And this is what I have:
I don't understand why, because I didn't change css files...
This could be the issue with index.js file. There you remove importing index.css line.
Remove this line in index.js file.
import './index.css';
You maybe load another CSS file after bootstrap rewrites CSS style rules from BS or bootstrap CSS file is not loaded, please check it in the console or in the browser which style from which file is applied like a first
You can dominate with important;
example:
font-family: 'Lilita One'!important;
I have a project going on, in several components, I need to put styles.
Bootstrap is working fine. But when I added style.css it does not seems to catch up.
I have checked the page source and the style.css file is linked properly to my index.html file.
my file structure:
This is the head tag of my index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="%PUBLIC_URL%/style.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>News Scroller</title>
</head>
It depends, what does your Webpack create when it compiles? How are you even putting your react component into your index.html now?
It seems like those are not there yet. These few things needs to be done:
There should be a div where your react application is mounted
Your index.html shouldn't reference styles.css directly. It's usually imported in your App.js or `Index.js, depending on your naming
In the style.css file, I was writing the CSS selector incorrectly.
I wrote this before : .input-group .input-group-sm .col-md-3
which is not able to select the className.
Instead of this I replaced the "" between the classNames and the CSS rules worked.
I currently have this as my base template, but depending on the route (using this as router)
, it has to switch out the css for another one, I tried but couldn't find a way to do this.
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css" />
<Title>Title</Title>
</head>
<body>
<div id="render-target"></div>
</body>
You cannot control the css file in meteor, because when the server starts, all the css files will be merged into one file. In order to define a css for a particular module, it would be better to use less or sass to define the namespace
I used JQM's Themeroller to develop a theme for my application. Right now, I'm just trying to get it to work in Chrome.
I have the head of my HTML file set up like so:
<head>
<title>SafeRides</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
and my file director is as follows:
Application/
index.html
themes/
SafeRidesTheme.css
SafeRidesTheme.min.css
images/
Am I just missing something obvious in the layout of my files? If someone could help me realize what's going on here I'd greatly appreciate it.
When using custom theme made by Theme Roller, libraries should be loaded this way.
You should remove jQM defualt style sheet and load jQM structure style sheet before your custom one.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>