I'm running the jekyll j1 theme locally and attempting to edit the ccs. I've followed a few tutorials over the past week which instruct me to create a file at:
/assets/css/style.scss
and insert the following
---
---
#import "{{ site.theme }}";
h2 {
color: red;
}
h3 {
color: blue;
}
when I execute bundle exec jekyll serve or yarn site, the site fails to launch and delivers the error:
Error: Can't find stylesheet to import.
╷
1 │ #import "j1-template";
│ ^^^^^^^^^^^^^
╵
/starter/assets/css/style.scss 1:9 root stylesheet
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
Can't find stylesheet to import.
I can run css edits in a different jekyll build (with the minimal mistakes theme):
---
---
#charset "utf-8";
#import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
#import "minimal-mistakes"; // main partials
h2 {
color: red;
}
h3 {
color: blue;
}
but I need to change the j1 theme and this doesn't use #import "{{ site.theme }}"; . I'm hoping folks have some tips to help me get around this.
It looks to me like I need to be importing something else, but I'm not sure what it is . . .
Thanks for considering,
D
in the end I got it working by making a new file in the root at assets\css\adds.css
no imports here, just a test snippet:
div#j1_footer.mt-4 div.copyright {
display:none;
}
and under the front matter in the .md files that I need to reference the new css:
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/adds.css">
:)
As this answer suggests, try to add Encoding.default_external = Encoding.find('utf-8') into D:\applications\Ruby25-x64\lib\ruby\gems\2.5.0\gems\sass-3.7.4\lib\sass\engine.rb, like this:
......
51 require 'sass/importers'
52 require 'sass/shared'
53 require 'sass/media'
54 require 'sass/supports'
55
56 Encoding.default_external = Encoding.find('utf-8')
57
58 module Sass
......
Because apparently, that's required to do in Windows:
If you're building on Windows then there's (probably) a hidden UTF-8
BOM at the beginning of the file which you'll need to find a way to
get rid of. This is a blind guess (you haven't yet provided the error
trace) but my experiences point in this way.
If it still doesn't work, try to remove the --- from the beginning of your SCSS file and see if it works.
Related
I'd like to define my own color variables in my SCSS, but how?
I checked this website and did everything that is described there.. but it doesn't work.
I have installed a preprocessor already!
Furthermore I tried to create a color-map and access the color with map-get.. doesn't work either.
colors.scss file
$yellow_100: #FFC819;
style.scss file with a colors.scss import
h1 {
color: $yellow_100;
}
I also tried this:
colors.scss file
$colors: (
color: #FFBB00
);
style.scss file
h1 {
color: map-get($colors, color);
}
Neither of them works.
SASS compiler preserves $ in output CSS and doesn't recognize $yellow_100 as a SASS variable. Use Interpolation to access variable's value instead of its name—just put it between #{ and }.
So your code should look like:
$yellow_100: #FFC819;
h1 {
color: #{$yellow_100};
}
Interpolation isn't used in old code examples. That's because SASS developers changed the syntax approximately in July, 2017, making interpolation mandatory for SASS variables. Here is more details on this.
Install sass with npm -g install sass
Create these two source files:
// _colors.scss
$yellow_100: #FFC819;
// style.scss
#import './colors';
h1 {
color: $yellow_100;
}
Execute sass ./style.scss ./output.css to compile your code
Add <link rel="stylesheet" type="text/css" href"[path to output.css]" /> to your HTML
Make sure you're using single colons to prefix your root header tag in your .scss files.
i.e :root{} and not ::root{}
I'm struggling with the dotLESS #import to have a separate variables file; I just constantly get "variable is undefined".
If I browse to the variable config file it works; if I put the variables inline in the main stylesheet it works; but in an #import, no dice. I'm mapping .css as well as .less to the extension, however it also doesn't work if I use .less only.
The variables file LESS-config.less is:
/*
.LESS VARIABLES
*/
#mbw_dark_cyan: #1293b5;
#mbw_cyan: #11add4;
#mbw_magenta: #e935da;
#control_text: #ffffff;
#action_delete: #ff5400;
#section_level1_bg: #mbw_dark_cyan;
#section_level1_fg: #control_text;
#button_bg: #mbw_dark_cyan;
#button_fg: #control_text;
#button_icon: #control_text;
#data_table_header: #mbw_cyan;
.dummy {
color: #control_text;
}
Which renders as:
/*
.LESS VARIABLES
*/
.dummy {
color: #ffffff;
}
Calling stylesheet main.css is:
#import (less) '/css/LESS-config';
button {
background: #button_bg;
}
Which gives the error:
variable #button_bg is undefined on line 4 in file '/css/main.css':
[3]: button {
[4]: background: #button_bg;
----------------^
[5]: }
As I said, if I replace the import with the same variables copied and pasted, it all works fine.
I've tried saving without BOM as in another answer, but that doesn't help.
EDIT, I've tried:
Removing the (less)
Changing to double quotes
Using relative path LESS-config as opposed to virtual absolute as above
Adding logger="dotless.Core.Loggers.AspResponseLogger" log="debug" to
web.config (cache is already false)
Adding debug="1"
Adding
debug="true"
Absolutely no change in behaviour.
EDIT 2:
I created a cut-down css that only had the import statement in it; when I browse to it the imported styles are in there. However, on a refresh, I just get a blank response.
So it seems to be something to do with my IIS config / caching? I've turned off content compression but no joy; disabled all output caching for .less and .css, still no joy!
FIXED as per Toni's comment; https://stackoverflow.com/a/51754771/318411:
This turned out to be a dotLESS issue, tracked on GitHub here: https://github.com/dotless/dotless/issues/553
The complete fix was to:
Upgrade dotLESS to version 1.6.7
Downgrade Microsoft.Extensions.DependencyInjection to 1.1.1.0 due to Method
not found error
Change the file extension of the import from .css to .less
Now all working.
Please try version 1.6.7 which fixes an error that imports are only executed on the very first request.
I potentially see two problems that you have.
You are trying to call #import (less) in a css file. This is a syntax specific to less framework.
Your main.css is not a less file.
Change your main.css to a main.less file and now try generating your css from main.less as your root file.
Assuming your import url for LESS-config.less is correct.
The above mentioned corrections should probably do the trick.
#import (less, optional) "mystyle.css"; is Less syntax, you cannot use it in CSS (Less #import Rules).
If you want to use #import in your CSS, it should follow this syntax (See here)
#import url|string list-of-mediaqueries;
But, you cannot import a Less file inside your CSS anyways.
The way I would have done this:
Say you have 3 .less files: config.less, color.less, header.less
I would create a style.less file with the following content:
/*------------------------------------------------------------------------------*/
style.less
/*------------------------------------------------------------------------------*/
/* 01. config */
#import "config.less";
/* 02. color */
#import "color.less";
/* 03. header */
#import "header.less";
Then I would complie style.less which would produce, style.css and I would include style.css in my website.
I am trying to override the "forkme" banner on my github.io page to get a better understanding of how Jekyll, HTML, CSSand GitHub works.
For that purpose, I created my ./assets/css/style.css file as mentioned in the readme of the official documentation on how to customize the CSS of the officially supported GitHub themes. I added the following CSS to it:
#forkme_banner { display: none; }
However, no luck, the banner doesn't disappear. Even adding fictitious elements to the CSS file like #test {testing: testtest;} doesn't add the line to my CSS file.
rename assets/css/style.css to style.scss
and change your scss code to :
---
---
#import "{{ site.theme }}";
#footer_wrap {display: none;}
#forkme_banner {display: none;}
#downloads {display: none;}
#whocares {haha: hehe;}
First and foremost thing is that the CSS changes takes time to update because it will be cached at their servers.
It usually takes 15-45 minutes for me but for few, it is taking 3 hours. I think it depends on the server location that Github pages are hosed if I am not wrong.
Coming to issue
`./assets/css/style.css
// change to
./assets/css/style.scss`
it should be changed to .scss.
Another troubleshoot that I encountered is
---
---
#import "{{ site.theme }}";
/* "{{ site.theme }}" = Your theme name */
/* Eg: #import 'jekyll-theme-cayman'; */
/* Your css rules goes after this */
.page-header {
background: #191c20;
}
I'm using Jekyll to host a site on Github pages. The problem lies in referencing file paths within css files.
I'd like to do something like this:
body { {background: #FFF url('{{ site.baseurl}}/images/page_bg.JPG') center 0 no-repeat; background-attachment: fixed; color: #4b595f; }
But it doesn't seem that Jekyll process the css files, so site.baseurl never gets swapped out.
There are other situations where I can't just change it to an inline style, so assume that's not a possibility.
Using the trick from Brian Willis' answer won't work with SASS in #import-ed files.
Instead, you can do this:
main.scss
---
---
$baseurl: "{{ site.baseurl }}";
#import "myfile";
_sass/_myfile.scss
myclass {
background: url($baseurl + "/my/image.svg");
}
Don't forget
the quotes around "{{ site.baseurl }}" (important in case of empty site.baseurl, and probably more robust) and
the plus sign with $baseurl + "/my/image.svg".
Jekyll processes all files that have YAML front matter. Stick a front matter section (even if it's empty) at the beginning of your file, and Jekyll will transform it correctly. Try using this at the start of the file:
---
title: CSS stylesheet
---
I wanted to use twitter bootstrap CSS only in a specific element in my web page.
I tried to do it like in code below. But after compiling this to a css file nothing was outputted. If I moved #import outside #my_div then I got all css definitions for twitter boostrap.
#my_div {
#import "../twitter_bootstrap/lib/bootstrap.less";
}
How can I namespace a less css file?
I am not using less on the live site, nor am I manually doing the compiling so this is kind of a "simple" version. It's not as automated as the others but may apply to some users.
Edit bootstrap.css / bootstrap-responsive.css
.tb {
// copy/paste the entire bootstrap.css
}
Recompile with less or use an online less compiler - http://winless.org/online-less-compiler
Edit the now-compiled file and change body {} CSS declarations to tb {}.
Use the new CSS file.
Place your "bootstrapped" content inside a <div class='tb'></div>
LESS documentation has a section about namespaces.
So you could define your lib in a separate document:
#ns {
.twitter () {
// Instructions to be used later
// Nothing will appear in compiled CSS except if called later (because of parenthesis)
}
}
import this file at the beginning of the CSS file to be compiled and use these instructions:
#my_div {
#ns > .twitter;
}
This is how I have done it. This takes place in the root of the bootstrap folder that is downloaded, or cloned from git.
## ./less/namespace.css (New file)
#ns {
.twitter() {
#import "less/bootstrap.less";
}
}
## ./style.less
#import "less/namespace.less";
.namespace {
#ns > .twitter;
}
Then run less style.less > style.css
Here is how I did it, based on majgis's github fork above:
bootstrap-ns.less:
#import "namespace.less"
.bs {
#ns > .twitter;
}
namespace.less:
#ns {
.twitter(){
#import "bootstrap.less";
}
}
You then reference bootstrap-ns.less in your html page. This was tested with dotLESS.
if you have control over the compilation parameters just set strictImports to false and work as you intended to everything should be fine. consider looking at less-strictimports or at this issue.