Error with SCSS generation in Jekyll 2.0 - ruby

I have my project laid out like so:
-Project
-css
-import.scss
-_sass/
main.scss
The contents of import.scss are:
---
---
#import "main.scss";
What I expected to happen was for main.scss to be imported into import.scss, then, import.scss would compile to import.css within the genrated _site/ directory.
Instead, I get the following error
Conversion error: There was an error converting 'css/import.scss'.
jekyll 2.0.3 | Error: Invalid CSS after "-": expected number or function, was "--"
I'm guessing it's complaining about the YAML front-matter at the top of import.scss, but I'm unsure what the solution is.

I had the same error, but here was my fix: use the “---” YAML front-matter only on the /css/*.scss files (e.g. your import.scss), but not on the partials.
The error seems to be referring to front-matters in the partials (/_scss) files. Once I took though out, the Sass started compiling again.
Hope this helps!

Related

Why is Eleventy looking for templates in my /history folder?

For some reason Eleventy is looking for templates in my /history folder, which I have already made changes to. Is there a way to stop this?
Now when I run my build the following error occurs:
[11ty] 2. (./.history/_includes/layouts/base_20220423223526.njk)
[11ty] Error: template not found: partials/navigation.njk (via Template render error)
[11ty]
[11ty] Original error stack trace: Template render error: (./.history/_includes/layouts/base_20220423223526.njk)
[11ty] Error: template not found: partials/navigation.njk
Here is my repo if you would like to have a look:
https://github.com/dulzorigo/eleventy-tailwind
Forked from:
https://github.com/ThirusOfficial/eleventy-tailwind
By default, Eleventy processes all files in your provided input folder, which is the root of your project in this case. To have Eleventy ignore certain folders or files, you can create an .eleventyignore file containing .history. See the Eleventy documentation for more information.

Why must Sass files in Jekyll start with "two lines of triple dashes"?

The Jekyll documentation says:
create a file with the proper extension name (one of .sass, .scss, or .coffee) and start the file with two lines of triple dashes, like this:
---
---
// start content
.my-definition
font-size: 1.2em
Jekyll asset documentation
But... why? I don't see any explanation anywhere of why Jekyll requires this. I'm worried that this will make it improper Sass/SCSS and I won't so easily be able to migrate my stuff out of Jekyll if I need to.
Additionally, I see many examples of people using Sass on GitHub's Jekyll without this practice.
For instance:
NSHipster.com (example from screen.sass)
#import './bourbon/bourbon'
#import './neat/neat'
#import './base/base'
If you dig a little further in the documentation you can find why front matter ?
And it's only necessary for your entry scss/sass file.

rake assets:precompile doesn't work (rails 3.1.1)

I am deploying to heroku yet I saw that the css files aren't being served (they also cannot be found on heroku).
I read that I need to do rake assets:precompile locally at first yet when I do it I get:
C:\project>bundle exec rake assets:precompile --trace
** Invoke assets:precompile (first_time)
** Execute assets:precompile
rake aborted!
undefined: Unexpected token: operator (<)
(in C:/project/app/assets/javascripts/application.js)
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)
I have nothing in application.js so I don't understand where the error is..
application.js is
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
Thank you
Update
If removing a .js.erb file I get the following error
C:\project>bundle exec rake assets:precompile RAILS_ENV=production --trace
** Invoke assets:precompile (first_time)
** Execute assets:precompile
rake aborted!
706: unexpected token at 'C:\Users\me\AppData\Local\Temp\execjs20111021-6448-ei2nm3.js(2, 3) Microsoft JScript runtime error: Out of memory
'
(in C:/project/app/assets/javascripts/application.js)
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)
Still have problems with erb css and js files not compiling...
This doesn't seem to end..
Thanks
I've been struggling with this trying to deploy to a staging server. The solution that works for me is to make sure you have the following in your config/environments/[your_environment].rb file:
config.assets.compress = false
By default, the compressors aren't available in environment other than production, which is why the precompile was failing.
I have the same issue here! In my case, what causes this issue is that, I add a new JS file to javascript folder, and I got an undefined: Unexpected token: operator (<) error while I tried to run precompile command. So I look into the new js file and found there is a HTML style comment <!-- --> in that file. I remove it and life is good now!
So try to find out is there any HTML style comment <!-- --> in your js file and just remove those comments. This is especially true when some JS code is copied from html file!
I think it is caused by an external javascript file which is not well-code-formatted. e.g.
function say_hi(){
// NOTICE that there's no semi-colon there!
name = "Jim"
alert("hi" + name )
}
when under the precompile, your code would put in 1 line, and since there's no necessary semicolon, your generated js file probably contains errors, like
"undefined: Unexpected token: operator (<)"
or something.
so, my suggestion is:
don't compress the js file if it's not well code-formatted, by setting "config.assets.compress = false" in your config file, following #Mike's answer.
use coffeescript as possible, it will help you generate very well formatted code. ( I am not a coffeescript guru, so please correct me if I am wrong )
I was having the same issue and it turned out to be caused by the inclusion of a embed javascript which had comments in the format: <!-- comment --> I've removed them and it worked like a charm! Hopefully this helps.
one thing I noticed is that it should be:
RAILS_ENV=production bundle exec rake assets:precompile
the definition of the RAILS_ENV needs to go before the bundle command, because it's setting the shell (bash) environment variable for the shell that executes the bundle command.
Your problems seems to be related to this:
https://github.com/bradphelan/jasminerice/issues/21
See also:
http://guides.rubyonrails.org/asset_pipeline.html
Heroku rails 3.1 app - compiling assets locally vs compiling assets during slug compilation
Error compiling Rails 3 CSS asset on Heroku
I've spent the last 1 hour scratching my head after encountering the same bug. The problem is the following line in your application.js:
//= require_tree .
This causes all files in your app/assets/javascripts/ directory to get included and it could be that there is some sort of bug in another file in the directory. I removed that line and got my assets to precompile (I wasn't really using application.js). So, look for a bug in a file being included by application.js
I had a similar problem:
Unexpected token: operator (<<)
This turned out to be a left over file from a merge conflict in Git. The conflict leaves a .orig file that contains "<<<<<<<<<<" wherever Git finds a block of code to be merged.
Because of the asset pipeline directive
//= require_tree .
in application.js, all files in the javascript folder (including .orig files) get precompiled on a push to servers like Heroku. The precompiler finds fault with the "<<<<<".
So my solution was to find all the .orig files and delete them from Git, using the 'git rm filename' method.

Cannot get Compass to generate icon sprites

I'm fairly new to Compass, but I have been trying to use Compass in a project to generate my icon sprites. See this tutorial:
http://beta.compass-style.org/help/tutorials/spriting/
IMO, the tutorial isn't exactly clear. To start, the tutorial never tells you to create the "_icons.scss" file that contains the "all-icon-sprites" mixin.
#import "icon/*.png";
#include all-icon-sprites;
The result of this is an error:
"Syntax error: Undefined mixin 'all-icon-sprites'."
So I added the "_icons.scss" file to my project, and changed the code to:
#import "icon/*.png";
#import "_icons";
#include all-icon-sprites;
Now, I get this error:
Syntax error: Invalid CSS after " $delete-position": expected ")", was ": $icon-delete-..."
on line 28 of /path/to/_icons.scss
Can anyone explain to me what I'm doing wrong? Or is the problem actually with the "_icons.scss" file?
The tutorial doesn't tell you to import the _icons.scss, because it is not required. You either import the png files or the generated file -- not both. They are the same, except if you import the png files, you end up importing a generated stylesheet that is kept up to date automatically as the png files change (renames, added, removed, etc).
do you have any png files in the <images>/icon directory?
To be honest, this error is one I would expect to see if the compass version that is processing the stylesheet isn't the one you're using on the command line. Are you compiling with rails or the CLI?

SASS Syntax Error: Properties aren't allowed at the root of a document

I am using SASS and it has been working, but now I get this...
Syntax error on line 1: Properties aren't allowed at the root of a document.
My file is using variables in the SASS format.
$blue-muted: #222244
$red-muted: #442222
$green-muted: #224422
When I remove the variables (and replace the values with the actual colors), it compiles fine. What is wrong here?
EDIT: My confusion stemmed from having installed HAML 3.0, but getting behavior consistent with an early 2.0 version. It turned out that I had a SASS command line tool from an old version in my path and it was running instead of the current version.
Looks like you are using the new SCSS syntax which should look like:
$blue-muted: #222244;
if you want to use sass, the colors should be declared as:
!blue-muted = #222244

Resources