Problem:
I have a Hugo site with pretty standard setup. It uses asset pipeline to process SASS. It imports bootstrap, font-awesome, and also uses resources.ExecuteAsTemplate (please do check out main.css file). CSS resources are being generated properly (I checked resources/_gen/assets/scss/sass) but the .css file in public directory is an empty file. I am not able to find any problems in the code. See the code here, site here. I tried creating a new project with same head.html file and .scss files, and it generated CSS resources, and had them in the public directory properly.
Additional info:
Related files:
head.html
main.scss
Currently, I am not using PostCSS; just have the config file created. Would be replacing minify with postCSS on line 13 in head.html once empty .css file problem is solved.
Output of hugo version:
Hugo Static Site Generator v0.57.2-A849CB2D/extended linux/amd64 BuildDate: 2019-08-17T17:57:54Z
I would gladly provide any additional information if required. Please help!
In the head.html file, link tag is:
<link rel="stylesheet" integrity="{{ $css.Data.Integrity }}" href="{{ $css.Permalink }}">
Changing the link tag with following:
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
fixes the issue.
It seems that Hugo requires user to first call .Permalink of the asset and then only other related functions or variables.
See related discussion on Hugo Discourse here.
Related
I am building a blog for myself using Jekyll, however, when I open the page in my browser, the SCSS fails to load. I try to navigate to the SCSS file through my browser but to no avail, the browser believes that the SCSS does not exist.
Here is how I add the stylesheet to the HTML:
<link rel="stylesheet" type="style/css" href="/_sass/_base.scss">
I did this to all of my stylesheets, and yet the it doesn't work.
Does anyone know how to fix this problem? Thank you in advance.
You do not link to stylesheets with an href to "/_sass/_base.scss".
Instead you should do the following:
create another directory to hold your "stylesheet", say, css/.
then add an empty stylesheet with an empty front matter block (required)
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
import your partial(s) into the above "stylesheet".
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
#import "base";
#import "mixins";
link your HTML page with the stylesheet:
<link rel="stylesheet" type="style/css" href="{{ 'css/style.css' | relative_url }}">
...and done!
Takeaways:
Import files from your _sass into a "dedicated stylesheet".
The dedicated stylesheet must contain the front matter block (can be empty).
Link your HTML file with the dedicated stylesheet.
Linked file has a .css extension even if your source file was css/style.scss or css/style.sass
You may hard-code the markup or use a Liquid construct to link the stylesheet.
When using a Liquid construct, prefer using the relative_url filter instead of using {{ 'css/style.css' | prepend: site.baseurl }} or {{ site.baseurl }}/css/style.css
I install Twitter Bootstrap using composer and can easily include the CSS like this:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
However, when I install Font Awesome using composer in the same way, I don't see any CSS files added to that folder. The one CSS file created by Font Awesome is in /app/vendor/components/font-awesome.
How do I include the downloaded Font Awesome CSS into HTML?
Thank you.
Just put the downloaded css file inside public/css/ directory and add following line in your view file.
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
And, Make sure your directory structure should like this:
public/css/font-awesome.min.css
public/fonts/
So that, icon will be displayed properly.
I am using laravel and nodejs on WAMP Server on Windows 10. Now using the elixir mix function
elixir(function(mix) {
mix.sass('app.scss');
mix.version('css/app.css');
});
which is generating a version file for my app.css and placing it to
public\build\css\app-d37b3a9d94.css
now when I add the link of the css file by using elixir function, like following
<link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}">
it generates a path like
/build/css/app-d37b3a9d94.css
but with this, the css do not work on the resulted page. I troubleshoot the problem and found that it do not work due to the first slash in the path. when I manually add the above css file path (which elixir generated) by removing the first slash, it works. like the following
build/css/app-d37b3a9d94.css
I am not sure how to fix this problem where elixir generated path to css file work. Looks like elixir adding an extra slash before the path but I have checked the code on several places for laravel and the code works with first slash in path. Not sure why it is not working for me.
One more thing I have noticed, even if I remove mix.version('css/app.css'); from gulpfile.js (which generate version file) and run gulp command to update css/app.css, and use <link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}"> it still refer to the version file rather than referring to css/app.css Is it a correct behavior?
Try to use it this way:
<link rel="stylesheet" type="text/css" href="{{ asset(elixir('css/app.css')) }}">
I get an Error Message with laravel 5, which I don't understand.
Next exception 'ErrorException' with message 'File build/css/all.css not
defined in asset manifest.
I haven't installed any asset pipeline or something. Just used elixir to compile, minify and version the scss-file to all.css and included it into the master view with <link rel="stylesheet" href="{{ elixir("css/all.css") }}">
What is this 'asset manifest' and how to fix this error?`
The question is of course what you want to achieve.
If you simply put all.css file into the public/css directory and you want to display this file, you can use:
<link rel="stylesheet" href="{{ asset('css/all.css') }}" />
However if you plan to modify this file and you don't want to have caching issues, you can put this all.css file again into public/css then put into gulpfile.js:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.version('public/css/all.css');
});
Now you'll need to run:
gulp
in your terminal, and now you can use
<link rel="stylesheet" href="{{ elixir('css/all.css') }}" />
as you previously did in your HTML.
It will create public/build/ folder with rev-manifest.json (this file is missing in your case).
I would recommend you to watch Managing assets Laracasts episode to understand it a bit better.
Same issue here!! I solve it by creating production version of css. I update gulefile.js as bellow,
elixir(function(mix) {
mix.sass('app.scss').version('css/app.css').browserify('app.js');
});
Then run following command which will create rev-manifest.json file in public/build directory.
gulp --production
Good luck!!
Before I begin this, some preface warning;
My knowledge of jekyll is 0.
My knowledge of ruby is 0.
Though I do think I've done pretty well for having no experience and just stepping into it today. That said, this is all completely new to me.
I wanted to give it a try for my github pages for a blog, just to see if I could make it work. I am running into a huge issue with what I suppose would be called the global variables.
I downloaded Lanyon here; Lanyon
I did the following steps, in order, from my Windows 8.1 x64 machine.
Installed python 3.4.1 (link)
Installed ruby using the RailsInstaller (link)
Installed rubygems using gem update --system from a PowerShell console
created a new github repository
created a gh-pages branch in that repository
created a Gemfile in that branch, with the following text
source 'https://rubygems.org'
gem 'github-pages'
Then came the work with Lanyon.
downloaded Lanyon and extracted it, I copied all of the files into a new directory
pushed the entire directory to my repository on branch gh-pages
tried to navigate to the gh-pages given url.
Now I did see the index page, it did have the content, but the theme wasn't working. The css files were missing. Per the instructions for theme structure found on jekyll's website, I made some changes; link
I moved the head.html and sidebar.html into a new subfolder under _includes called themes/lanyon, per the suggested layout on the api docs.
I loved the css folder into a new folder called assets/themes/lanyon, again following those docs
I moved the files apple-touch-icon-144-precomposed.png, apple-touch-icon-precomposed.png, and favicon.ico into a new folder called assets/themes/lanyon/img, following the example in the api docs.
Now comes the trickiest part ... trying to get the {{ ASSET_PATH }} to work.
I looked at the file _includes/themes/lanyon/head.html and saw the 3 css assets had no variables.
I changed them to look like the following
<link rel="stylesheet" href="{{ ASSET_PATH }}/css/poole.css">
<link rel="stylesheet" href="{{ ASSET_PATH }}/css/syntax.css">
<link rel="stylesheet" href="{{ ASSET_PATH }}/css/lanyon.css">
I updated _config.yml to look like this, obviously filling in the [] variables instead.
# For more see: http://jekyllrb.com/docs/permalinks/
permalink: /:categories/:year/:month/:day/:title
exclude: [".rvmrc", ".rbenv-version", "README.md", "Rakefile", "changelog.md"]
pygments: true
markdown: redcarpet
title: lanyon
tagline: 'lanyon theme'
author :
name : Ciel
email : stacey.cielia.lynn#gmail.com
github : ciel
paginate: 5
production_url : http://[username].github.io
Lanyon :
version: 2.0.0
BASE_PATH : "/[repositoryname]"
ASSET_PATH : "/assets/themes/lanyon"
But even with all of that, it still doesn't work. It does_ work if I type the absolute paths to the files, but that's not how jekyll is supposed to work, from my understanding.
To access ASSET_PATH, try :
{{ site.Lanyon.ASSET_PATH }}
Edit : You're using Jekyll Bootstrap (JB) variables, not Jekyll ones.
site.Lanyon.ASSET_PATH is specific to JB. Here it's '/assets/themes/lanyon'
site.Lanyon.BASE_PATH (site.baseurl in Jekyll) is the path from your site root to your Jekyll install.
eg : If you do http://ciel.com/my/jekyll/site/ to reach you site : site.Lanyon.BASE_PATH or site.baseurl = '/my/jekyll/site'
So if you want to reach your assets from any page, you need to do :
<link rel="stylesheet" href="{{ site.Lanyon.BASE_PATH }}{{ site.Lanyon.ASSET_PATH }}/css/poole.css">
or
<link rel="stylesheet" href="{{ site.baseurl }}{{ site.Lanyon.ASSET_PATH }}/css/poole.css">
Et voilà !