I am trying to follow the step by step tutorial here
Here is my structure :
_config.yml _data/ _includes/ _layouts/ _sass/ 404.html about.md assets/ Gemfile Gemfile.lock index.html
and _sass :
ls _sass/
main.scss
and assets/css :
ls assets/css/
styles.scss
and when I jekyll serve I get :
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/styles.scss':
File to import not found or unreadable: main. on line 1
So somehow jekyll is not able to find the main.scss file but I don't understand why since apparently everything is set up as it should be. Any idea ?
Also here is my style.scss:
---
---
#import "main";
and my main.scss :
.current {
color: green;
}
If I change styles.scss to :
---
---
.current {
color: green;
}
Then it works since it does not try to import main.scss. I tried with/without _config.yml for specifying the sass directory. This does not change anything.
Related
So, I recently started to code a web interface with CGI, after finding how to print hello world on my Apache web page with HTML, I wanted to add some CSS to it but apparently it doesn't work.
I'm on Linux, and I am working with Apache2.
So there is my source file hello.c (which is in /usr/lib/cgi-bin):
#include <stdio.h>
int main()
{
printf(
"Context-type:text/html\n\n"
"<html>\n"
"<head>\n"
"<title> Hi world </title>\n"
"<link type=\"text/css\" rel=\"stylesheet\" href=\"style/style.css\">\n"
"</head>\n"
"<body>\n"
"<h2>Hello world !</h2>\n"
"</body>\n"
"</html>\n"
);
return 0;
}
and there is my CSS file (which is in /usr/lib/cgi-bin/style/):
body {
background-color:rgb(255, 0, 170);
}
h2 {
font-family: Times;
font-size: 38pt;
}
I already tried to put my CSS file in my home directory but it doesn't work too.
If you check your network panel of your browser's debugger, you're probably encountering a 500 status, as the server refuses to serve /cgi-bin/style/style.css.
Generally, style sheets do not belong in the CGI directory. You should move them to somewhere in your DocumentRoot path.
Assuming your configuration is something like:
DocumentRoot "/var/www"
ScriptAlias /cgi-bin/ "/usr/lib/cgi-bin/"
Set your directory structure to:
/usr/lib/
└── cgi-bin
└── hello.cgi
/var/www
└── style
└── style.css
Then change the relative path
"<link type=\"text/css\" rel=\"stylesheet\" href=\"style/style.css\">\n"
to an absolute path (note the / prefix):
"<link type=\"text/css\" rel=\"stylesheet\" href=\"/style/style.css\">\n"
I'm very new to SCSS so I'm still learning the basics.
I'm simply wondering if you can access variables and mixins in a parent file from a child module. It's kind of hard to put into words so I'll give an example below..
File: app.scss
#use base;
$main_color: red;
File: _base.scss
#use app;
body {
color: app.main_color;
}
The idea is that you could have a root file with a bunch of base styles that the imported modules could reference... is this a thing? If so how do you do it?
You need to change _base.scss in this way:
#import "app";
body {
color: $main_color;
}
I am new to pug/jade. I have 3 pug template files named "layout.pug", "home.pug" and "mixins.pug".
The layout.pug contains following code:
html
include mixins
body
include home
The code in this home.pug file:
body
div.main
+popup('Hello', 'Hello World')
The pug file 'mixins.pug' contains mixins. I have added the mixin popup() to this file.
The code in this file:
mixin popup(title, description)
div.pop-up-body
h2 #{title}
p #{description}
But when I compile my pug files using grunt pug command, I got an error
"pug_mixins.popup is not a function".
If you know the reason, kindly help me.
I got the answer to this question.
The reason of the error:
I had included the mixins.pug in the layout.pug file. But the
mixin popup(title, description) is called from the home.pug file.
So the mixin is not available in the home.pug file.
(The home.pug is also included in layout.pug file. So I included the mixins.pug only in the layout.pug file).
Solution:
I removed the code include mixins from layout.pug file and added it
to the home.pug file.
Code:
layout.pug file
html
body
include home
home.pug file
include mixins
div.main
+popup('Hello', 'Hello World')
mixins.pug file
mixin popup(title, description)
div.pop-up-body
h2 #{title}
p #{description}
I am looking for an answer of how to use Liquid for my background image path in css file and hoping the image can be seen in localhost and on Github at the same time.
The first background path only worked on Github and the second one only worked in localhost. Is there any way to achieve what I want without comment out the code every time I commit to Github? I was thinking maybe I need to use {{%%}} so I read the documentation from Jekyll and looked up for answers but still no luck.
CSS
---
---
.content-wrapper {
max-width: 800px;
margin: 0 auto;
height: 2600px;
background: url({{site.baseurl}}/_site/assets/img/dummy_blog_content.jpg);
background: url({{site.url}}{{site.baseurl}}/assets/img/dummy_blog_content.jpg);
}
YML
baseurl: /project
exclude: ["README.md"]
You can use absolute_url to automatically prepend the url and base_url in liquid but that should be done in your templates:
{{ "/assets/style.css" | absolute_url }}
The generated url shouldn't have _site in it, as that won't work in Github pages. In your template refer to your css location, in this case /assets/style.css:
<link rel="stylesheet" href="{{ '/assets/style.css' | absolute_url }}">
In order to render a background image dynamically, I have a piece of SCSS that looks like this:
my-div {
background-image: url(asset_path('img_name.png'));
}
However, what I'd like to do is use a .yml file to import that background image dynamically. I imagine it would look like this:
my-div {
background-image: url(asset_path('{{ site.data.directory.background_image }}'));
}
//directory.yml
background_image: img_name.png
Doing so requires that I preprocess my scss file. In order to do that, jekyll-assets requires that I append the .liquid file type to the .scss file so that it will render all the liquid tags within. However, doing such causes an error, because #import cannot find .liquid files.
//styles.scss.liquid
my-div {
...
}
//main.scss
#import "styles"
error: File to import not found or unreadable: styles
Alternatively, if I try to import:
#import "styles.scss.liquid" I get the same issue.
What is the correct approach to getting the liquid preprocessor to both be imported and used?
You should be using Sprokets to require anything that is processed using Sprockets asset pipeline, Sprockets does not directly integrate with SASS in that manner, and neither does Jekyll-Assets. The following should work:
//= require ./styles.scss.liquid
body {
// My Styles
}