When building a prod version of my Angular 9.0.4 app the css is bundled and added at the top of the dist/index.html like this:
<link rel="stylesheet" href="styles.6ea28d52542acb20a4c6.css"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyTitle</title>
<base href="/">
Which I think is causing the warning in Chrome:
Resource interpreted as Stylesheet but transferred with MIME type text/html:
and the stylesheet is not rendered correctly. Note this happens only when loading the domain with subfolders e.g. www.mydomain.com/product/1
Is it possible to configure the build such that the stylesheet element is added below <base href="/"> which would possibly fix the warning?
I'm not aware of any way to move the css file import, but you can stop this error by turning off css extraction:
yarn build --extractCss=false
OR inside your build configurations in angular.json
{
...
"build": {
"configurations": {
"yourBuildName": {
...
"extractCss": false
}
}
}
}
Related
p{
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="sport.scss">
</head>
<body>
<p>Helllooo</p>
</body>
</html>
I wrote two other pages in this project correctly. But, when intended to code the third one, changes didn't apply at all.it seems that my html code doesn't receive the styles.
Surprisingly, the sass file fully converted to CSS file, and no problem was evident.
SASS / SCSS is a preprocessor for CSS, and can't be interpreted by your browser.
This is a duplicate question and possible solutions have alredy been described here: Attaching a SCSS to HTML docs
if you are using vs code download a sass extension which will convert your sass code into a css code and then you can link that css file generated by the extension to your html page
i will recommend scss-to-css extension by yutent as it doesn't require you to make it active like other extensions
you must read documentation sass official and follow this guide https://sass-lang.com/guide. if you not install sass this two way how install sass
read this https://sass-lang.com/install
or download extension in visual code
if you are still confused change your sass become sport.css
I'm trying to deploy my react app on github as pages but the css isn't working. Im attaching my github repository if anyone can help.text.
As right now the page is looking totally messed cause not css is applied.
cLooking at generated index.html file in the gh-pages branch, I can see that the file is malformed; you have missing closing tags in your HTML.
// index.html (I added newlines for readability)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link>font-family: "Montserrat", sans-serif; href="https://fonts.googleapis.com/css?family=McLaren|Montserrat&display=swap" rel="stylesheet"
<link>rel="stylesheet" href="./styles.css"
...
Notice the link tags aren't closed. Because of this, the CSS file will not be loaded by the browser.
I have a new Svelte app using Sveltekit, skeleton project. I create a component with a single div and attempt to set a background image. I am using adapter-static to generate a static site on build. If inline the css on the div, it works fine. If I create a class in the <style> block of the component then the styles do not load.
The component:
<div class="foo-test"
style="width: 500px; height: 500px; background-image: url('circle.png');">
</div>
npm run build. files created:
it works:
change the component to use css in <style> block:
<div class="foo-test"></div>
<style>
.foo-test {
width: 500px;
height: 500px;
border: 2px solid black;
background-image: url("circle.png");
}
</style>
build again. files created. No css applied:
My svelte.config.js:
import adapter from '#sveltejs/adapter-static';
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
prerender: {
default: true
}
}
};
export default config;
Am I missing a step to the process? New to Svelte. TIA
Edits:
app.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
<body>
<div>%svelte.body%</div>
</body>
</html>
Edit2: I should note, it works correctly then running in dev npm run dev and launch browser to http://localhost:3000/. only the index.html file generated from the adapter-static is not working properly when I open the file in the browser file:///C:/Repos/foo/foo/build/index.html
It is possible that you are deploying to Github Pages and you have not included a .nojekyll file. I saw this behaviour and resolved it by adding .nojekyll in the /static directory.
It appears that Jekyll does not recognise the directories with a leading underscore.
If using gh-pages to deploy, you also need to use the --dotfiles options to ensure that the file is pushed.
Note: I still don't see that loading the built files directly works locally, but I am not sure that that would be expected behaviour.
I have an Angular 5 project, I have an assets folder and where I place my common CSS file and reference it in index.html, now I am planning to create another folder called "sasstyles" and I will create some .scss file there when I compile or run I want all the .scss file contained on "sasstyles" folder are compiled as .css and copied to the assets folder. how I do this in angular 5 or later
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='./assets/css/common.css' rel='stylesheet' type="text/css">
</head>
<body>
<app-root></app-root>
</body>
</html>
I have the same problem. What I found is the following.
Inside angular.json build options:
"styles": [
"src/styles.scss",
{
"input": "src/sasstyles/something.scss",
"inject": false,
"bundleName": "something"
}
]
That will create a "compiled" something.css file in the root output folder.
Unfortunately I can't find a way to put the result into assets. It seems there used to be a bug acting as a feature that let you specify it like this:
"bundleName": "assets/something"
But it no longer works (*Edit: I mean the bug/hack to specify subfolder no longer works. The basic solution does work, but puts the resulting css directly under /dist). See here: https://github.com/angular/angular-cli/issues/20360
I am using bootstrap-4 in my Vue webapp, But I am not able to customise this as is explained here.
I have my index.html which uses Bootstrap CDN, like following:
<!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 http-equiv="x-ua-compatible" content="ie=edge">
<title>Sample</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="/static/custom.scss" type="text/x-scss"> ==> where I am overwriting variable
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</head>
<body>
<div id="app"></div>
<script src="/dist/client-vendor-bundle.js"></script>
<script src="/dist/client-bundle.js"></script> -->
</body>
</html>
I also tried changing the order of custom.scss and bootstrap.css in index.html as well.
Following is custom.scss, where I am overwriting variables:
$body-bg: #f5f5f5;
$body-color: #f5f5f5;
$enable-flex: true;
But this is not working.
I also tried importing this in my app component, like following:
<style lang="scss">
#import 'custom.scss';
// Following also did not work
$body-bg: #333;
$body-color: #999;
</style>
How do I overwrite these variable to customise my webapp.
You can make this a lot cleaner by using the npm package and a webpack customisation.
If you first install bootstrap in your project:
npm install bootstrap#4.0.0-alpha.5
and make sure you can use sass-loader in your components:
npm install sass-loader node-sass --save-dev
now go to your webpack config file and add a sassLoader object with the following:
sassLoader: {
includePaths: [
path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
],
},
projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')
Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following:
<style lang="scss">
#import "bootstrap";
</style>
To customise it I'd recommend pulling in the bootstrap _variables first and then you can reference everything like normal, i.e.
#import "_variables";
// example customisation - I'd recommend importing a file here to store them all
$body-bg: $gray-dark;
// just place all your customisation work above the below import of bootstrap
#import "bootstrap";
This will mean you need to remove any CDN CSS versions or they could overwrite things, but you should now be able to fully customise bootstrap.
As another benefit this method allows you to strip out any bootstrap components you are not using. To do so rather than #import "bootstrap"; which is the entire bootstrap library, instead navigate to that file, i.e. node_modules/bootstrap/scss/bootstrap.scss and then copy across the #import's you actually want. Essentially optimising your project...
I tried following approach which worked:
cloned the bootstrap repo
modified _custom.scss in this directory.
ran npm install
ran grunt dist as is in documentation
copied generated bootstrap css and js files from here in my index.html
so my index.html has following:
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script href="/static/bootstrap.js"></script>
As of now, I don't think customising is possible when using CDN link of bootstrap.