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}}">
Related
In my site I don't have any LESS code or such set up but there seem to be some CSS LESS generating in my site when I check in FireFox inspector but I don't know the cause of it. Things are being generated are like:
grid-framework.less | normalize.less | table.less | scaffolding.less
I can't unfortunately post all the code because is huge. So here are the CSS includes
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/myStyle.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.css">
Script includes
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lib/screenfull/screenfull.js"></script>
It's coming from a sourcemap reference at the end, which would look like this:
/*# sourceMappingURL=bootstrap.min.css.map */
The file it links to will contain encoded references to these less files.
Feel free to remove both the above line with the sourceMappingURL and the .map file it refers to, from your local folder.
If you're interested, here's a link explaining sourcemaps
sourcemaps explained
It's coming from your .map file that LESS/SCSS/SASS creates once compiled. The purpose of this file is to give the original file location of the CSS styles for easier debugging and development.
You don't need it if you aren't using a compiler, but it is nice to have in the event you are.
Actually we have one global.css style sheet in which we are using #import url("http://fonts.net/sample.css?type=cssandid=123") for fonts.
But it's creating issues in Bundling & minification so I got following solutions:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
and I replace #import with element
<link rel='stylesheet' type='text/css' href='http://fonts.net/sample.css?type=cssandid=123'>
even after this I'm getting CSS errors as I checked in CSS Lint(http://csslint.net/) and not getting real UI effect as with #import.
Do we have any other solutions for this?
Environment: VS2015 , MVC 5.2 , sitecore 8.1
Thanks
Hope you found the solution since you posted this question
What you can do, to avoid the #import url('yourCssUrlHere') is simply copy/paste the URL on your browser and then copy/past the CSS that is displayed.
And then simply replace the #import by the CSS you just copied.
Most of the time if the import is a font, there will be other references to .woff or .woff2 files.
Just download them and store those files somewhere on your project folder and just add their absolute link on all the url() fields.
That way, you use external fonts or stylesheets, but internally, without request them outside of your website.
This is my stylesheet declaration code:
<link rel="stylesheet" href="username-theme.css">
<link rel="stylesheet" href="layout.css">
"username-theme.css" filename vary, ie john123-theme.css or jenifer-theme.css
I'm trying to solve the following problem:
in my layout.scss I want to use following code:
body{color:$theme-color}
where $theme-color comes from john123-theme.scss
Have a look at the documentation.
so you can have a file smth like _variables.scss with your variables defined and then in your layout.scss you will include it like
#import 'variables';
so all the variables will be available there.
You could try importing the other way, and at the end of your user stylesheet, import layout.scss. as long as the variable is defined before the import, it's value will be used in the layout.scss contents. Then you'll just have to link the user css file into the page, because it now includes everything you had in layout.scss. ex:
_layout.scss
body{color:$theme-color}
username-theme.scss
//define variable
$theme-color: #fff;
//import
#import "layout";
I'm diving into Bootstrap, and I'm beginning with the simplest example possible. In my HTML file there's only one line regarding style sheet:
<link href="css/bootstrap.css" rel="stylesheet">
In the css folder I've deleted all other css files (minified and css map) except bootstrap.css and bootstrap-theme.css - and now the HTML file lookes screwed up.
But when I copy back the minified css in the directory, the HTML renders fine - despite no link to it in the HTML. How is that possible?
You may have some #import statements in the stylesheet you are declaring in your HTML. That means that your stylesheet makes use of another stylesheet.
I have a style sheet file which imports three other css files:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
style.css contains:
#import url("../ins/style.css");
#import url("commerce/css/style.css");
#import url("../in/custom.css");
I would like to improve the loading time and reduce the number of requests, so I want to combine the three css files into one in the same order as they are imported. but problem arise that all layout is messed up. I am really wondering why this is happening since import css file is the same as inlcuding them. any ideas? thanks for taking time to read.
If commerce/css/style.css is the CSS file that holds the layout, it could be that that path is not correct for all pages. I would ensure that all paths are relative to root to ensure that they are correct across the site. This includes the original href url for your combination css file.
I'm also not so sure if putting three imports in one css is less time for loading as opposed to linking them in the html. If you want to reduce load time you need to reduce number of loads somehow such as only loading internet explorer css when the browser is internet explorer etc.
Let me know of anymore developments.
You can try SSI includes, H5BP ant build script or even borschik to combine your CSS.