I try to install Compass in my Symfony 2.3.1 project on Windows XP though not successfuly up to now.
I have Ruby, compass, sass the newest versions installed.
This is my assetic configuration in app/config/config.yml
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
#bundles: [ ]
#java: /usr/bin/java
filters:
cssrewrite: ~
sass: ~
compass: ~
Here is my app/cofnfig/parameters.xml
# Assetic
assetic.filter.compass.images_dir: %kernel.root_dir%/../web/images
assetic.filter.compass.http_path: /images
assetic.filter.compass.bin: C:/Ruby200/bin/compass
The block code including stylesheets section in app/Resources/views/base.html.twig
{% stylesheets filter="compass"
"#PortalSlubnyMainBundle/Resources/assets/css/main.sass"
"#PortalSlubnyMainBundle/Resources/assets/css/header.sass"
"#PortalSlubnyMainBundle/Resources/assets/css/footer.sass"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Ok so when I try to compile this from command line as a result of this command php app/console assetic:dump I get output below:
Dumping all dev assets. Debug mode is on.
17:46:14 [file+] C:/xampp/htdocs/slub/app/../web/css/12c97a7.css
[Assetic\Exception\FilterException] An error occurred while
running: "C:\Ruby200\bin\ruby.EXE" "C:/Ruby200/bin/compass"
"compile" "C:\Documents and Settings\piotr\Ustawienia lokalne\Temp"
"--images-dir" "C:/xampp/htdocs /slub/app/../web/images" "--config"
"C:\Documents and Settings\piotr\Ustawi enia
lokalne\Temp\ass1C9.tmp" "--sass-dir" "--css-dir" "C:/Documents and
Settings/piotr/Ustawienia lokalne/Temp/ass1CA.tmp.sass"
Error Output: You must compile individual stylesheets from the
project directory.
Input: html, body {
overflow-x: hidden;
background-color: yellow;
}
assetic:dump [--watch] [--force] [--period="..."] [write_to]
Ruby is working from cmd and it is set in the PATH environment variable as well as compass. Guys any help would be fully apreciated.
EDIT:
Thanks for the answer unfortunetly it doesnt help me either.
When I changed names to bundles/portalslubnymain/css/main.sass CLI return me error sth similar to that this file is unable to find, thogh the paths to files seem to be ok
I followed instructions form the article you posted earlier I also checked this article
Looking at your code i suggest you followed this article. please notice the UPDATE notice at the end!
At first your assets should live in the Resources/public folder ...
... not in Resources/assets. fix this...
Afterwards please change ...
{% stylesheets filter="compass"
"#PortalSlubnyMainBundle/Resources/public/css/main.sass"
"#PortalSlubnyMainBundle/Resources/public/css/header.sass"
"#PortalSlubnyMainBundle/Resources/public/css/footer.sass"
... to
{% stylesheets filter="compass"
"bundles/portalslubnymain/css/main.sass"
"bundles/portalslubnymain/css/header.sass"
"bundles/portalslubnymain/css/footer.sass"
... because some assetic filters ( i.e. cssrewrite ) are known to NOT work with the #-syntax.
Afterwards symlink your assets into the web dir like this:
app/console assets:install web --symlink
Finally you should be able to run
app/console assetic:dump
Related
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.
I am practicing with Jekyll building a little website from scratch. Unfortunately, the following command returns error:
rodolfocangiotti.github.io rodolfo$ bundle exec jekyll serve --incremental --host=0.0.0.0
Here is what is printed to stdout:
Configuration file: /Volumes/Data HD/Jekyll Folder/rodolfocangiotti.github.io/_config.yml
Source: /Volumes/Data HD/Jekyll Folder/rodolfocangiotti.github.io
Destination: /Volumes/Data HD/Jekyll Folder/rodolfocangiotti.github.io/_site
Incremental build: enabled
Generating...
Liquid Exception: Could not locate the included file 'bodyheader.html' in any of ["/Volumes/Data HD/Jekyll Folder/rodolfocangiotti.github.io/_includes", "/usr/local/lib/ruby/gems/2.4.0/gems/minima-2.1.1/_includes"]. Ensure it exists in one of those directories and, if it is a symlink, does not point outside your site source. in /_layouts/default.html
jekyll 3.6.2 | Error: Could not locate the included file 'bodyheader.html' in any of ["/Volumes/Data HD/Jekyll Folder/rodolfocangiotti.github.io/_includes", "/usr/local/lib/ruby/gems/2.4.0/gems/minima-2.1.1/_includes"]. Ensure it exists in one of those directories and, if it is a symlink, does not point outside your site source.
Actually, the bodyheader.html file is inside the _include folder. Is anyone able to explain why Jekyll is unable to locate that file and how to solve the issue?
UPDATE:
The bodyheader.html file is included inside the default.html file, which is located inside the _layouts folder. Here is the content of that file:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include bodyheader.html %}
{{ content }}
</body>
</html>
Try to rename _include folder to _includes.
Well, I just installed fresh Laravel 5.4. Then installed npm and decided first time to use webpack instead of gulp.js. As you know, Laravel default provides sass Bootstrap integration. Used this command to generate my css from sass.
npm run dev
Bootstrap, Jquery worked perfect, but Glyphicons weren't displayed. Checking my public/css/app.css I saw, that Glyphicons font-face path are not suitable.
src: url(/fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1);
If I, manually use ../fonts instead of /fonts it will work. I tried to figure out and edit the default path. In _variables.css I set:
$icon-font-path = "../fonts" - but npm gives error.
By default it is: "~bootstrap-sass/assets/fonts/bootstrap/"
Copied fonts folder inside puclic/css folder, didn't work.
Added options to the webpack.mix.js file:
options({processCssUrls: false})
and in _variables.css again set:
$icon-font-path = "../fonts"
Run npm-run-dev and it worked, glyphicons were displayed. But, I don't want to set false for processCssUrls. Because, in this case I will not able to minimize css files using command: npm run production.
Also, I followed this question, but couldn't find any answer, all solutions didn't work.
glyphicons not showing with sass bootstrap integration
Finally, found the solution. In webpack.config.js set:
publicPath: '../'
instead of Mix.resourceRoot
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: Mix.resourceRoot
}
},
I am using Windows platform (please do not laugh at me). And I am trying to build a Symfony2 project using asseti in my localmachine that is running Windows 7.
Now I can not for the love of my life figure out why it is not dumping the assetic files. It is always saying some kind of RunTime Exception. I think it has to do with the coffee bin and node path. Is this the right way to set paths for coffee bin and node?
framework:
[...]
# Twig Configuration
twig:
[...]
# Assetic Configuration
assetic:
debug: "%kernel.debug%"
use_controller: true
bundles: [...]
filters:
sass:
load_paths: [ "%kernel.root_dir%/../src/xxxxx/WebsiteBundle/Resources/public/vendor/" ]
compass: true
coffee:
bin: C:\Users\xxxxx\AppData\Roaming\npm\coffee
node: C:\Program Files\nodejs\node
cssrewrite: ~
# Doctrine Configuration
[...]
php composer.phar install works fine
php app/console asset:install works fine
php app/console assetic:dump gives me the following error:
[RuntimeException]
Unable to write file C:/xampp/htdocs/xxxxx/app/../web/js/3b27a3f_js?key=AIzaSyCk9Cxgv09X9DKar1bcsLAXxlqP3YhF0OI_1.js
My initial feeling is that something wrong with the coffee bin and node path.
Below is where those are in my machine.
I have no idea what's going on. I'll dump you any output that might help solve this. I feel clueless here. I am using SASS, Compass, coffee, etc.
integration of Symfony2 and Assetic
1. file config.yml
# Assetic Configuration
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ ]
#java: /usr/bin/java
filters:
cssrewrite: ~
less:
node: "C:\\Program Files (x86)\\nodejs\\node.exe"
node_paths: ["C:\\Users\\websky\\AppData\\Roaming\\npm\\node_modules"]
apply_to: "\.less$"
yui_css:
jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
yui_js:
jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
#closure:
# jar: "%kernel.root_dir%/Resources/java/compiler.jar"
2. file base.html.twig
<head>
{% stylesheets filter='less,?yui_css' '#AcmeBundle/Resources/less/main.less' %}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}
</head>
3. building assetic
php app/console assetic:dump --env=prod
useful link:
Less Windows Node.js Hanging
try this
coffee:
bin: "C:\\Users\\xxxxx\\AppData\\Roaming\\npm\\coffee"
node: "C:\\Program Files\\nodejs\\node"
I had exactly the same problem with node. If this doesnt work, try pointing to the exact .exe path. Windows seems to have all sorts of trouble.
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Ă !