Initial main.scss starts in 'css' directory instead of '_scss' directory

[johnfmorton]

I have just updated from generator-jekyllrb 1.2.1 and built a new Jekyll site using generator-jekyllrb 1.4.1.

Upon site creation, I noticed the starter styling file was in my "css" directory with the filename "main.scss" instead of starting in my "_scss" directory as I expected it to be.

When I moved this "main.scss" into the "_scss" directory the grunt serve task reported the following error:

Running "concurrent:server" (concurrent) task
    Warning: Error: Invalid CSS after "@charset "utf-8"": expected "{", was ";"
            on line 4 of app/_scss/main.scss
      Use --trace for backtrace. Use --force to continue.

        Aborted due to warnings.

I'll look into this further after I get my current fire drill project delivered, but wanted to share this in case one of the people already more knowledgable about the generator-jekyllrb project knew of a quick update to fix it.

Thanks.

[johnfmorton]

Adding to this in real time as I dig deeper.

It looks like the "scss" being in the 'css' directory may be intentional based on reading the assets page in the Jekyll docs.

My initial install of generator-jekyllrb 1.4.1 didn't generate any files in the _scss directory, so after creating "base.scss", "layout.scss" and "syntax-highlighting.scss" manually, the grunt serve command did generate the starter site and loaded in my browser.

The page loaded unstyled though and the console reports that no main.css file is being loaded because it is not found. I'll continue to research what's going on. Perhaps it is a problem with my installation. If not, any tips on making the "main.css" file be generated for using in the grunt.serve command would be appreciated. (More info here as I discover more...)

Thanks.

[johnfmorton]

More discoveries as I go along.

I took the "main.scss" file, which I said in the previous post may actually belong in the "css" directory and stuck it back in the "_scss" directory.

I removed the YAML front matter (i.e. the first 3 lines) and now it seems to be working and the main.css file is not longer generating a file not found error in my console of my browser. I also see the following in my console telling me that it's being injected into my page.

[BS] File Changed: main.css
[BS] Injecting file into all connected browsers...

Anyone else having this same issue? I'm wondering if there is a problem with my installation of generator-jekyllrb 1.4.1 or not.

Thanks. (Again... I'll update this if I figure out more.)

[ksweetie]

@johnfmorton I'm seeing the same issues you are. Moving main.scss to _scss and removing the front matter kind of helped, except then it complained about not having default Jekyll template CSS (_base, _layout, _syntax_highlighting). I generated a default Jekyll project in another directory and copied the CSS files, _includes, and _layouts directories, and I seem to now have a default Jekyll project.

Not only that, but the Gemfile it creates looks like this:

source "http://rubygems.org"

gem 'jekyll', '~> 2.3.0'gem 'kramdown'gem 'sass', '~> 3.4.3'

That's an easy problem to fix (split the three gems up on separate lines), but I wonder why this happened. My package.json was also including the wrong version of grunt-contrib-csslint:

"grunt-contrib-csslint": "~0.10.0",

I had to change that to "~0.4.0", since that was the newest version of that plugin.

Definitely running into some super weird problems. @robwierzbowski any insight into this? John and I had a lot of the same issues, so unless we're both doing something wrong this seems like a real problem.

Thanks!

[gjeck]

I'm seeing the same issues after the update. @DynamicDyno and @johnfmorton did either of you see the following when updating the generator?

npm WARN unmet dependency /Users/.../.nvm/v0.10.36/lib/node_modules/generator-jekyllrb/node_modules/yeoman-generator/node_modules/cheerio/node_modules/htmlparser2 requires entities@'1.0' but will load

Not sure if this has anything to do with it, but I figured it might be worth mentioning.

[johnfmorton]

@DynamicDyno, I noticed that odd looking Gem file too. My Gemfile was a bit different since I chose some different set up options, but mine ended up like this:

source "http://rubygems.org"

gem 'jekyll', '~> 2.3.0'gem 'redcarpet' gem 'compass', '~> 1.0.1'

I've typically seen these options broken up on individual lines like this:

source "http://rubygems.org"

gem 'jekyll', '~> 2.3.0'
gem 'redcarpet' 
gem 'compass', '~> 1.0.1'

I'm not sure if that is just a different way of formatting and both options are correct or not.

@gjeck , after updating I ran into many issues with gems.

Based on my saved Google searches, my error was something like:

in `rescue in eval_gemfile': Gemfile syntax error on line 3: syntax error, unexpected tIDENTIFIER, expecting end-of-input (Bundler::GemfileError)

I'm not a Ruby expert by any stretch and ended up removing every gem in my system and reinstalling them all again and things started working again.

[dnozay]

gem 'jekyll', '~> 2.3.0'gem 'redcarpet' gem 'compass', '~> 1.0.1'

most definitely a bug, fixed in commit 8f0332514ee64559f2155513ac89bb70591e0865.

[dnozay]

I don't have much time for maintaining this project but I can definitely help if you guys come up with tests / fixes / pull requests.

[dnozay]

I removed the YAML front matter (i.e. the first 3 lines) and now it seems to be working and the main.css file is not longer generating a file not found error in my console of my browser. I also see the following in my console telling me that it's being injected into my page.

1. sounds like YAML front matter may be an issue when using tools like grunt-scss-lint.
2. sounds like it is also an issue with generator-jekyllrb because it copies what looks like an scss file but really isn't (front matter makes it invalid scss file).

[simonwallstrom]

I had the same issues with a freshly scaffolded project. As suggested above i removed the yaml front matter and moved the main.scss to the _scss folder. This partially solves the issue. The css is generated to .tmp/css/main.cssand browsersync injects the styles properly. Although the autoprefixing doesn't seem to work for some reason and the css folder in app/css is empty.

@johnfmorton do you have the same issue? Anyone else?

I'm gonna look into this more when I have time and report back here if I find anything.

[johnfmorton]

@simonwallstrom I think I did have the same issue with the css files not being copied from the .tmp directory into the dist/css directory properly. I must have updated my Gruntfile.js to move those files into the proper place during a "grunt build" task. It's been a while since I made that change, but I think it was in the usemin task. Here's what I've got in my Gruntfile.js right now for that task:

usemin: {
      options: {
        assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/img']
      },
      html: ['<%= yeoman.dist %>/**/*.html'],
      css: ['<%= yeoman.dist %>/css/**/*.css']
    },

Regarind autoprefixing, that's not something I do in mine so I don't know about that issue.

Just like you, I plan on looking into this more as time permits.

[prestancedesign]

Hi,

I've just tried this generator and both problem (main.scss and Gemfile new line) are still there.

For Gemfile, a PR #151 is open but for main.scss, did you find a solution for @johnfmorton ?

Thanks.