I have project built using RUBY with grunt as its asset pipeline. At build time I need to take all the styles from the /dist/all.min.css file and place them into a custom style tag in the head <style amp-custom>...</style.
When developing I include the css as a linked stylesheet in the head. Which is fine. But when this is live the styles must be inlined.
I have tried a few grunt emailer tasks which are designed to take any linked asset and inline it, however this either didn't work or would take all linked assets and try and inline them and there are a few JS links that i do not what inlined, only the stylesheet.
head during development
<head>
<title>Title</title>
<link rel="canonical" href="/index.html" data-embed-ignore>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<!-- Linked stylesheet for developing -->
<link rel="stylesheet" type="text/css" href="{{{asset_base}}}/css/all.css" data-embed>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0.js" async data-embed-ignore></script>
</head>
desired head for production
<head>
<title>Title</title>
<link rel="canonical" href="/index.html" data-embed-ignore>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<!-- Inlined styles -->
<style amp-custom>
/* Custom styles here */
</style>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0.js" async data-embed-ignore></script>
</head>
I am using mustache for the templating engine and was think i could somehow include the css file if its available. This way when i do the production grunt task it could remove the linked style tag and generate the file thats included via mustache. But i am not entirely sure how to do that or even if it will work.
Related
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 compiled a vuejs app with npm run build and when viewing the result in firefox the CSS does not display. It does load in the network tab and it shows under the style editor but says "0 rules". Everything loads fine when running npm run serve in development.
If I copy the style text and paste it over itself the style loads properly
This is the HTML for my app
<!DOCTYPE html>
<html>
<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=icon href=/favicon.ico>
<title>frontend</title>
<link as=style href=/css/app.36bb3a4e.css rel=preload>
<link as=style href=/css/chunk-vendors.baa7246e.css rel=preload>
<link as=script href=/js/app.fcf42d91.js rel=preload>
<link as=script href=/js/chunk-vendors.ea5cf647.js rel=preload>
<link href=/css/app.36bb3a4e.css rel=stylesheet>
<link href=/css/chunk-vendors.baa7246e.css rel=stylesheet>
</head>
<body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/app.fcf42d91.js></script>
<script src=/js/chunk-vendors.ea5cf647.js></script>
</body>
</html>
What could be causing this and how can I fix it?
Found out nginx was serving the css file with the content type text/plain instead of text/css. Adding include /etc/nginx/mime.types; to the location block fixed it.
I am trying to link my css to my vue.js file. I was building this out without the webpack. So I had many style worked out.. However, when I decided to move it to a webpack none of my custom css is even calling. I did research that said to include the css in the index.html as a link so that is what I have done. Is there a better way to do this that I didn't see? Any help would be much appreciated. It is also worth mentioning that I tried to use Include in the App.vue as well as require as I had seen in other suggestions but both pulled up errors and refused to compile any of my files....
<!DOCTYPE html>
<html>
<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">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<link rel="stylesheet" type="text/css" href="../src/assets/css/main.css">
<title>my-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<p>this is test script</p>
<!-- built files will be auto injected -->
</body>
</html>
this is how I load some libs to my angular project:
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<script src="lib/angular.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/effects.css">
</head>
<body>
</body>
</html>
now, suppose I wanted to load another css file that is also stored in the "css" folder. Could I declare just the folder and have all ".css" files inside properly loaded to the project? For example:
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<script src="lib/angular.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/*.css"> <--- here!
</head>
<body>
</body>
</html>
Thanks.
Unfortunately, no. Angular is a front-end framework, and you cannot load all the CSS files in a folder with only front-end languages without specifying them individually.
If you have access to a back-end language, you can scan the directory and work out what files are contained within. Then you can use a loop to individually write each link to your HTML.
Without a back-end language, the best thing you can do is package up all of the CSS or JS files used in a project into a single file. This improves performance, and also allows you to easily compress the code.