I have a React app created using create-react-app which links to my CSS file as shown below in index.html file:
<link rel="stylesheet" href="../src/site.css"></link>
The site.css is implemented below:
body {
background-color: green;
height:100%;
width:100%;
}
When my app is run it does not apply styles to the body. I can see the css file is being downloaded.
The src directory is not served with create-react-app. You either need to move your CSS file to the public directory or import it from one of your JavaScript files.
Internally everything is bundled using Webpack with loaders that understand stylesheets, so the simplest way to handle this is to remove the link tag from your public/index.html file and instead add the following import to your src/index.js file:
import "./site.css";
Alternatively, if you really need to link to the stylesheet from your html file, you can move it to public/site.css and change your link tag to reference it:
<link rel="stylesheet" href="/site.css">
I saw similar posts on SO here and on GH here, but neither solved the issue that I have.
I have a Jekyll app on my gh pages where I needed to use scss features (mostly for mixins). However, I could not get jekyll to work with scss.
Currently, this is where my (CSS) files are at. All of my CSS are taken from custom.css. I imported it in header <link rel="stylesheet" href="{{ site.baseurl }}/assets/stylesheets/custom.css">.
The .scss files inside _sass folder are empty.
This is what it looks like inside _config.yml:
...
#sass
sass:
sass_dir: _sass
style: compressed
That's where I am at now. Here are some things I have tried:
I have tried changing custom.css into custom.scss (and then updated the header <link href... stylesheets/custom.scss">. When I do that, I get Resource interpreted as Stylesheet but transferred with MIME type text/x-scss... error.
I tried changing the configuration inside _config.yml into:
sass:
sass_dir: assets/stylesheets
style: compressed
... and kept the changes from 1. I restarted jekyll server. However I still get Resource interpreted as Stylesheet but transferred with MIME type text/x-scss... error.
Tried adding <link rel="stylesheet" href="{{ site.baseurl }}/_sass/main.scss">, but I get GET http://localhost:4000/_sass/main.scss error.
The problem, I noticed, is that the app seem to not recognize main.scss at all. I tried to create a simple red-colored div with main.scss, but nothing was displayed.
The question is, how can I use .scss with Jekyll?
Having _sass/main.scss, in assets/stylesheets/custom.css add the sass file (keep three dashes at the beginning):
---
---
#import "main";
Now you can work with all your sass variables/mixins etc in custom.css below the import keyword.
Make sure you add the generated css to your layout:
<link rel="stylesheet" href="{{'/assets/stylesheets/custom.css' | absolute_url}}">
In the docs you can read the following:
Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
https://github.com/twbs/bootstrap-sass
I have several scss files. One for every major section of my app (user-page.scss, admin.scsss etc).
I tried making one application.scss and imported bootstrap as in the docs. I added the file in index.html after bootstrap.scss and before all my other scss files.
<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">
I get the following error:
/usr/bin/scss --no-cache --update intro.scss:intro.css
error intro.scss (Line 22: Undefined mixin 'make-row'.)
So it seems it does not find bootstrap. It works if I import bootstrap in each file. Is this the right apporach? I think not. I get problem when I try to manually override a bootstrap variable.
How can I have several scss files and only import bootstrap once?
Think you're mixing SCSS import with HTML CSS links. So this bit here is wrong:
<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">
I assume this is from your built HTML file. Your HTML does not know what an SCSS file is. Your SCSS must be processed into a CSS file before it is usable in your final HTML file.
The way to import an SCSS file is to use that import command inside the parent SCSS file at the top. So if your main SCSS file is application.scss, then at the top of that, you import your other SCSS files:
#import "bootstrap";
But you need to make sure that the _bootstrap.scss file is in the same directory as your application.scss file for this import to work.
I've just started using LESS to simplify my CSS stuff. I want to be able to define the colours in one file, so I can have several colour schemes that I can switch between just by changing which file is being referenced.
I tried something like this:
<link rel="stylesheet/less" href="/css/colours.less" />
<link rel="stylesheet/less" href="/css/styles.less" />
But I get "variable not defined" errors in the styles.less file.
I can "fix" this by using import "/css/colours.less" at the start of styles.less, but I have to do this for every single LESS file, and it makes it much, much harder to change what file is being used.
Is there any way to define variables in one file and use them in another? Or any way to auto-import the colours.less file at the start of the other files?
You should be compiling your .less files into a single .css file and including it once on every page (i.e. styles.less compiled to styles.css). That way the browser doesn't have the overhead of recompiling the CSS every page load. Also the .css file can be cached.
Instead of adding:
<link href="/css/colours.less" />
<link href="/css/styles.less" />
<link href="/css/forms.less" />
<link href="/css/widgets.less" />
...etc...
It should be:
<link href="/css/styles.css" />
And in styles.less you should have:
#import 'colours';
#import 'forms';
#import 'widgets';
...etc...
Otherwise, if you want to reuse colours.less in multiple .less stylesheets, you'll need to #import them in each stylesheet.
For development purposes, I recommend using a single, primary .less file that contains only variable declarations and #import statements. That way it's easy to find where additional scripts are added. LESS makes it very easy to add or remove stylesheets to keep the code organized.
For example, style.less might look something like:
// import statements
#import 'core';
#import 'mixins';
#import 'lists';
#import 'buttons';
#import 'forms/form';
#import 'forms/search';
#import 'forms/contact-us';
#import 'modules/module';
#import 'modules/archive';
#import 'modules/events';
// variables
#image-path: '/assets/images/';
#font: Helvetica, Arial, sans-serif;
#black: #000;
#dark-grey: #333;
#grey: #888;
#light-grey: #CCC;
#white: #FFF;
#red: #F00;
This structure makes it easy to add a new stylesheet, such as when adding a new module:
...
#import 'modules/events';
#import 'modules/foo'; //add another module
...
It also makes it very easy to remove styles if they're no longer being used. If the foo module was to be removed, it's easy to remove all the foo styles simply by removing the #import 'modules/foo'; statement.
Is it possible to include one CSS file in another?
Yes:
#import url("base.css");
Note:
The #import rule must precede all other rules (except #charset).
Additional #import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.
Yes. Importing CSS file into another CSS file is possible.
It must be the first rule in the style sheet using the #import rule.
#import "mystyle.css";
#import url("mystyle.css");
The only caveat is that older web browsers will not support it. In fact, this is one of the CSS 'hack' to hide CSS styles from older browsers.
Refer to this list for browser support.
The #import url("base.css"); works fine but bear in mind that every #import statement is a new request to the server. This might not be a problem for you, but when optimal performance is required you should avoid the #import.
The CSS #import rule does just that. E.g.,
#import url('/css/common.css');
#import url('/css/colors.css');
Yes.
#import "your.css";
The rule is documented here.
In some cases it is possible using #import "file.css", and most modern browsers should support this, older browsers such as NN4, will go slightly nuts.
Note: the import statement must precede all other declarations in the file, and test it on all your target browsers before using it in production.
Yes, use #import
detailed info easily googled for, a good one at http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
yes it is possible using #import and providing the path of css file
e.g.
#import url("mycssfile.css");
or
#import "mycssfile.css";
#import("/path-to-your-styles.css");
That is the best way to include a css stylesheet within a css stylesheet using css.
The "#import" rule could calls in multiple styles files. These files are called by the browser or User Agent when needed e.g. HTML tags call the CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using #import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#import url("main.css");
</style>
</head>
<body>
</body>
</html>
CSS File "main.css" Contains The Following Syntax:
#import url("fineprint.css") print;
#import url("bluish.css") projection, tv;
#import 'custom.css';
#import url("chrome://communicator/skin/");
#import "common.css" screen, projection;
#import url('landscape.css') screen and (orientation:landscape);
To insert in style element use createTexNode don't use innerHTML but:
<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
#import 'fineprint.css' print;
#import 'bluish.css' projection, tv;
#import 'custom.css';
#import 'chrome://communicator/skin/';
#import 'common.css' screen, projection;
#import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>
Import bootstrap with altervista and wordpress
I use this to import bootstrap.css in altervista with wordpress
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
and it works fine, as it would delete the html link rel code if I put it into a page
#import url('style.css');
As opposed to the best answer, it is not recommended to aggregate all CSS files into one chunk when using HTTP/2.0
I have created main.css file and included all css files in it.
We can include only one main.css file
#import url('style.css');
#import url('platforms.css');
Yes You can import easily one css to another (any where in website)
You have to use like:
#import url("url_path");
sing the CSS #import Rule
here
#import url('/css/header.css') screen;
#import url('/css/content.css') screen;
#import url('/css/sidebar.css') screen;
#import url('/css/print.css') print;
For whatever reason, #import didn't work for me, but it's not really necessary is it?
Here's what I did instead, within the html:
<link rel="stylesheet" media="print" href="myap-print.css">
<link rel="stylesheet" media="print" href="myap-screen.css">
<link rel="stylesheet" media="screen" href="myap-screen.css">
Notice that media="print" has 2 stylesheets: myap-print.css and myap-screen.css. It's the same effect as including myap-screen.css within myap-print.css.
I stumbled upon this and I just wanted to say PLEASE DON'T USE #IMPORT IN CSS!!!! The import statement is sent to the client and the client does another request. If you want to divide your CSS between various files use Less. In Less the import statement happens on the server and the output is cached and does not create a performance penalty by forcing the client to make another connection. Sass is also an option another not one I have explored. Frankly, if you are not using Less or Sass then you should start. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html