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
}
Related
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 have three .css files: header.css, footer.css and breadcrumbs.css. I imported them all into compose.css:
#import "/footer/footer.css";
#import "/header/header.css";
#import "breadcrumbs/breadcrumbs.css";
When I import compose.css to main-page.css it doesn't import files from header.css, footer.css and breadcrumbs.css, but only from compose.css.
Is there any crutchless method to implement the idea of .css double-importing?
I figured out what was the problem. The thing is the paths in my compose.css are relative to compose.css itself. And it is evident that these links will not work for main-page.css which is located in another folder. To make it work, i written absolute links. In my case it looks so:
#import "http://localhost:63342/labs/php-lab-1/common/default-styles/defaults.css";
#import "http://localhost:63342/labs/php-lab-1/common/footer/footer.css";
#import "http://localhost:63342/labs/php-lab-1/common/header/header.css";
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 use webpack via CLI, like webpack --watch.
Goal is to compile JS with SASS and put in some separate html page.
I have some links to svg files in my sass, looking like that:
label {
background: url(../images/checkbox.svg);
}
The problem is that I never get it in the browser after compiling. I have following situations:
If I compile it using svg-loader, in browser I see compiled css is something like that:
background: url([object Object]);
Here is suggested to use svg-url-loader instead.
If I use mentioned svg-url-loader, I have whole page css messed up which makes browser to show raw text instead of styled page.
If I use file-loader, I get css compiled to background:
background: url(37efc0ccedf6fe109636ad1416c29425.svg)
and as I put resulted bundle.js to some other place, I am not happy with copying some files I already have.
If I use raw-loader, I get some xml instead of file name in the url(...), which just doesn't work, showing "wrong property value" error in the css.
I would be happy to get just regular path instead of all that things, like
background: url(../images/checkbox.svg);
So what is correct approach to handle svg in my situation? Thank you.
Ok, I found solution:
{
test: /\.svg$/,
loader: 'file?name=/resources/[path][name].[ext]'
},
{
test: /\.png$/,
loader: 'file?name=/resources/[path][name].[ext]'
}
This way loader preserves name and path and prepends additional /resources/folder.
I have the following file structure:
main.less
modules
colors.less
header.less
footer.less
video_player.less
reset.less
base.less
colors.less looks like:
#brand-primary-color: orange;
#brand-secondary-color: grey;
I would like to import colors.less in main.less, and have the variables used globally throughout the less files.
Creating themes would look something like this:
brand-1.less
#import "themes/brand-1-colors.less"
brqand-2.less
#import "themes/brand-2-colors.less"
brand-3.less
#import "themes/brand-3-colors.less"
[...]
Can't find any way to do this!
The only method that seems to work is to import the colors.less file within each less sub-file. This makes creating themes a bit tedious...
Any ideas? :) Thanks guys!
Presuming main.less has CSS in it, all you have to do is create a file where you'd import all other less files. The file structure would look like:
final.less
modules
main.less
colors.less
header.less
footer.less
video_player.less
reset.less
base.less
After compiled, the final.css would be the CSS file containing everything. The final.less would look like:
#import "main.less";
#import "colors.less";
#import "header.less";
#import "footer.less";
#import "video-player.less";
#import "reset.less";
#import "reset.less";
Last but not least, you should compile only final.less.