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.
Related
I'm using less css in my stylesheets. I'm also in localhost via xampp.
I'm having an issue with my stylesheet not rendering (for a split second) on page load.
The page loads quickly without the styles, then loads just a split second later with the styles applied.
Has anyone had any similar issues using less?
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Feed</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- style sheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.1/css/froala_blocks.min.css" />
<link rel="stylesheet/less" href="styles.less" />
<!-- scripts -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body style="font-family: 'Roboto', sans-serif;">
index.php
<?php
require 'navbar/navbar.php';
require 'header.php';
?>
<!-- My HTML source here -->
styles.less
#import 'whitetheme.variables.less';
/* styles are here */
whitetheme.variables.less
#dark-font-color: rgba(0,0,0, .9);
#medium-font-color: rgba(0,0,0, .8);
#light-font-color: rgba(0,0,0, .7);
#secondary-background: #fff;
#primary-gray: #f0f2f5;
#primary-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
#primary-blue: #4c8bf5;
less css not rendering (for a split second) on page load
LESS is not CSS.
Browsers do not natively support using LESS files (*.less) as stylesheets.
LESS is a system that generates CSS stylesheet files for you.
LESS is intended to be used as part of a build process (which you'd automate with npm run, or Gulp, or WebPack, or Rollup, or whatever the JavaScript ecosystem thinks is cool this month).
You are using an external third-party script to convert LESS to CSS in the browser, which is the cause of the delay.
Specifically, here's your problem:
<link rel="stylesheet/less" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
You're using a LESS processor script that runs in the browser to convert your .less file into a CSS stylesheet that browsers can natively understand - this process happens asynchronously and independently of the browser loading the page.
This is what's happening (in chronological order, as your browser loads the page):
The browser loads your / page (that's the HTML output of your index.php script).
The browser loads styles.less asynchronously.
However, browsers will load rel="stylesheet" resources synchronously and block the page render, however.
The browser loads less.min.js synchronously (as you aren't using the defer or async attributes) and it then runs and processes your LESS and converts it to CSS.
The less.min.js file will wait until less.min.js is loaded, however.
And it's during that wait-for-less.min.js-file period that the browser renders your page (fast, isn't it?) without the CSS styles that it doesn't have yet.
The best fix is to run the LESS-to-CSS conversion step as part of a project build process. I suggest you read-up on npm and the rest in order to do this properly.
Something like this:
Compiling less with webpack
Install Webpack and LESS:
https://www.npmjs.com/package/less-loader
https://webpack.js.org/guides/getting-started/
cd your-project
npm init -y
npm install webpack webpack-cli --save-dev
npm install less less-loader --save-dev
Configure Webpack + LESS:
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
],
},
};
Run npx webpack
Edit your HTML:
Remove the <script> to less.min.js.
Update the <link> to point to the output .css file from Step 3.
Found the issue.
instead of
<?php
require 'navbar/navbar.php';
require 'header.php';
?>
I just needed to require my header first
<?php
require 'header.php';
require 'navbar/navbar.php';
?>
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 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 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.
I'm trying to use one of the styles from http://bootswatch.com/. I would like to apply the .less version of their styles to bootstrap.css. To do so I'm doing the following as described in http://lesscss.org/#usage:
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="variables.less" rel="stylesheet/less">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
But it doesn't work, i.e. I still have the default bootstrap theme.
To simplify I've merged variables.less into bootswatch.less, so the code now looks like this:
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
But still I get the default bootstrap theme.
I've checked with the debugger and all files are properly linked, so I guess I'm doing something wrong in the usage.
If you use the less files from bootswatch, I think you also need to use the less files from bootstrap. The variables.less file will overwrite the values from the original file.
What I did to make it work is download the bootstrap less files, copy the bootswatch.less and variables.less to the same folder (I renamed to variables-bootswatch.less for forward-compatibility, if bootswatch is not up to date).
Then I modified the bootstrap.less file to include those aforementioned files :
// Header and everything before variables.less
#import "variables.less"; // Modify this for custom colors, font-sizes, etc
#import "variables-bootswatch.less";
// everything else, then at the end
#import "bootswatch.less";
Lastly, you just need to import this file (no CSS)
<link href="bootstrap.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
It appears that there is one project on github that is meant to build you swatch themes : swatchmaker on github. It should produce the appropriate CSS files.
I think you need to change the order of script file as follows
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<script src="less.js" type="text/javascript"></script>
<link href="bootswatch.less" rel="stylesheet/less">