For performance reasons, I want to inline my CSS in the HTML files generated by Jekyll. Naively, I tried:
<style type="text/css">
{% include main.scss %}
</style>
The trouble is, that includes the source file (which just defines variables and includes other files), not the compiled CSS. How can I get the compiled CSS?
Jekyll scssify filter to the rescue :
<style type="text/css">
{% capture sass_file %}
{% include main.scss %}
{% endcapture %}
{{ sass_file | scssify }}
</style>
Related
Dear Excellent developes.
I'm trying to duild static web site with Hugo (Netlify CMS).
I wanna build from scratch, if I can;-) ( I designed the site by myself. SO I wanna write sass from scratch).
But, sass files aren't read successflly.
Do you solve the problem?
I checked there pages to solve it , But I couldn't
https://gohugo.io/hugo-pipes/scss-sass/
https://discourse.gohugo.io/t/custom-css-throws-type-nil-not-supported-in-resource-transformations/19942
the structure of this Web site
Basically, there are not many changes from Hugo install.
layouts/index.html // I write there the following code.
resources/_gen/assets/sass/main.scss // I wrote simple css to this file → html {background: yellow;}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
{{ $sassTemplate := resources.Get "sass/main.scss" }}
{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.relURL }}">
</head>
<body>
<h1>Nice. It's looking good already.</h1>
<ul>
{{ range (where .Pages "Section" "blog") }}
<li>
<a href="{{ .RelPermalink }}">
{{ .Title }}
</a>
</li>
{{ end }}
</ul>
</body>
</html>
Error messages
Rebuild failed:
Failed to render pages: render of "home" failed: "/Users/RPOISITORY-NAME/layouts/index.html:11:40": execute of template failed: template: index.html:11:40: executing "index.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations
↓
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
{{ $sassTemplate := resources.Get "sass/main.scss" }}
{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.relURL }}">
</head>
hugo v0.81.0+extended darwin/amd64 BuildDate=unknown
Thanks in advance.
Your .scss files must be in the assets folder at the root of your project, and not in the sub-folder resources/_gen/assets.
I wrote a post in french on the topic, maybe you can grab some hints / use a translator
I'm building a web page using Hugo.
Here is my website header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Website</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<meta name="referrer" content="no-referrer" />
<link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css"
/>
<!-- tried this as per suggestion from Hugo forums
{{ $sassIncludes := (slice "node_modules" "assets/scss/vendor" "assets/scss/components") }}
{{ $target := "styles/main.css" }}
{{ if .Site.IsServer }}
{{ $cssOpts := (dict "targetPath" $target "enableSourceMap" true "includePaths" $sassIncludes ) }}
{{ $styles := resources.Get "/css/main.scss" | toCSS $cssOpts }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
{{ else }}
{{ $cssOpts := (dict "targetPath" $target "includePaths" $sassIncludes ) }}
{{ $styles := resources.Get "/css/main.scss" | toCSS $cssOpts | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
{{ end }} -->
{{ $style := resources.Get "/css/main.scss" | resources.ToCSS | minify | fingerprint}}
<link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
</head>
<body>
<header>
<div class="nav-bar">
<a class="top-logo" href="/">
<img src="/img/logo.svg" />
</a>
</header>
</body>
</html>
Here is main.scss:
#import 'reset';
#import 'commonStyles';
#import 'pricing';
#import 'docs';
#import 'header';
#import 'footer';
#import 'home';
header {
.nav-bar {
background-color: red;
}
}
config.toml:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "Website"
assetDir = "static"
I'm running on macOS with hugo server command. I'm changing the background color in styles. Here is terminal output:
thatsme/../website-landing (master↑1|✚7…) % hugo server
Building sites … WARN 2020/05/18 12:27:34 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/05/18 12:27:34 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
| EN
-------------------+-----
Pages | 14
Paginator pages | 0
Non-page files | 0
Static files | 19
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 17 ms
Watching for changes in /Users/thatsme/git/website-landing/{archetypes,content,data,layouts,static}
Watching for config changes in /Users/thatsme/git/website-landing/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Change of Static files detected, rebuilding site.
2020-05-18 12:27:42.202 +0200
Syncing css/main.scss to /
Styling changes apply only when I restart server. Html changes are getting applied properly.
The following command should do the trick:
hugo serve --noHTTPCache --ignoreCache --disableFastRender
I just installed laravel 5.5 and the good news is, I finally managed to get npm run dev/production working. The manifest file looks fine too. In my bladeview I am using these lines:
#if($userIsLoggedIn)
<link href="{{ mix('build/ccs/admin.css') }}" rel="stylesheet">
#else
<link href="{{ mix('build/ccs/auth.css') }}" rel="stylesheet">
#endif
But loading the page results in the following error:
So I was like, lets go into the mix helper and dump some data to see what it looks like... :
dd($manifest, $path); gives :
Is it just me, or does the index actualy exists? using
dd($manifest[$path]);
actualy results in Undefined index. The weirdest thing, when I write the link outside of the conditional like this:
<link href="{{ mix('build/css/auth.css') }}" rel="stylesheet">
<!-- Styles -->
{{-- #if($userIsLoggedIn)
<link href="{{ mix('build/ccs/admin.css') }}" rel="stylesheet">
#else
<link href="{{ mix('build/ccs/auth.css') }}" rel="stylesheet">
#endif --}}
then if all works fine! no errors or undefined indexes whatsoever, versioning/non versioning.. all loads :P There is some stuff going on here that I don't understand.. Any1 has any ideas??
EDIT::
Using these lines at the bottom of the body works fine too..
#if($userIsLoggedIn)
<script src="{{ mix('/build/js/admin.js') }}"></script>
#endif
)) try to change way of css files)
mix('build/ccs/admin.css') => mix('build/css/admin.css')
etc.)
It should be 'build/css/admin.css' instead of build/ccs/admin.css.
I have a blade template that I created and I want to add css files depending on the page that it is called to.
The file below is the main file called ._head.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="">
<title>{{ 'Login' }}</title>
<!--Core CSS -->
{{ HTML::style('asset/bs3/css/bootstrap.min.css') }}
{{ HTML::style('asset/css/bootstrap-reset.css') }}
{{ HTML::style('asset/assets/font-awesome/css/font-awesome.css') }}
{{ HTML::style('asset/bs3/css/bootstrap.min.css') }}
<!-- Custom styles for this template -->
#yield('addcss')
<!-- Ends Here -->
{{ HTML::style('asset/css/style.css') }}
{{ HTML::style( 'asset/css/style-responsive.css') }}
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>{{ HTML::script('asset/js/ie8/ie8-responsive-file-warning.js') }}<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
I tried to add css to the above template using
#extends('layouts._head')
#section('addcss')
{{ HTML::style('asset/assets/bootstrap-datepicker/css/datepicker.css') }}
{{ HTML::style('asset/assets/bootstrap-daterangepicker/daterangepicker-bs3.css') }}
{{ HTML::style('asset/assets/bootstrap-datetimepicker/css/datetimepicker.css') }}
#stop
#include('layouts._header')
But the contents of the #section and the _head are now showing up inside the body tag after the contents of _header template are displayed. What am I doing wrong here ? Thanks in advance.
You cant "include" something on the same file you "extend" without wrapping it in a section. You should do this:
#extends('layouts._head')
#section('addcss')
{{ HTML::style('asset/assets/bootstrap-datepicker/css/datepicker.css') }}
{{ HTML::style('asset/assets/bootstrap-daterangepicker/daterangepicker-bs3.css') }}
{{ HTML::style('asset/assets/bootstrap-datetimepicker/css/datetimepicker.css') }}
#stop
#section('header')
#include('layouts._header')
#stop
then in your .heads file put the yield of 'header' at the very bottom (or wherever you want it)
....
#yield('header')
</html>
Or if the file remains the same in all views - just do this in .heads
....
#include('layouts._header')
</html>
I want basic theming support in my Symfony2 project, so I wanted to have separated static files (css, js, img) for each theme.
I have tried to add
assetic:
read_from: %kernel.root_dir%/../web/themes/mytheme
but this took no effect, my {{ asset('css/style.css') }} are still referencing realtic to %kernel.root_dir%/../web, instead %kernel.root_dir%/../web/themes/mytheme.
Any idea?
Fixed with config:
assetic:
debug: %kernel.debug%
use_controller: false
read_from: %kernel.root_dir%/../web/bundles/mybundle/themes/%my_theme%
write_to: %kernel.root_dir%/../web
filters:
yui_css:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
yui_js:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
And in layout I have:
{% stylesheets 'css/*' filter='?yui_css' %}
<link rel="stylesheet" type="text/css" media="all" href="{{ asset_url }}" />
{% endstylesheets %}