What's the state of the art when it comes to making Sinatra reload compiled SASS files in development? I've found that when I'm editing pure CSS the app updates on browser refresh. However when using .scss files (which I watch with sass --watch public/styles/scss:public/styles/css/) this doesn't work — I have to restart the above watch to see the latest changes (with the server running).
I've tried Sass::Plugin::Rack, Sinatra Reloader, and Rack::LiveReload, with no success.
Issue solved — tried Sprockets but that didn't work because I'm using Ruby 1.9.3. Running sass --watch manually instead.
Related
I have a set of SASS files and I use Compass as my pre-processor. I run compass watch in the MacOSX Terminal.
My files are structured so that all of my code gets compiled twice... once with media queries in mq.css and once without in no-mq.css. The non-media query code is meant for IE8 and browsers that won't recognize media queries.
When I make a change to any of my files, my mq.css gets compiled but very seldom does the no-mq.css. If I compass clean and then manually compass compile they both will. If I run only compass compile without a clean first, only the mq.css compiles. I can run watch all day and my mq.css will continue to get compiled.
I've upgraded, downgraded, and generally played with combinations of SASS and Compass. I am not using Susy or another SASS-related library. I do have SASS maps turned on.
My SCSS starter package can be reviewed here: https://github.com/jhogue/scss-scaffold in case I am missing something in config.rb or /sass/framework/_config.scss.
My gems are as follows:
compass (1.0.3)
compass-core (1.0.3)
compass-import-once (1.0.5, 1.0.4)
css_parser (1.3.5)
fssm (0.2.10)
libxml-ruby (2.6.0)
listen (1.1.6, 0.7.3)
sass (3.4.7)
Its not as critical as it is annoying, and I'd like to know if anyone else has encountered this or a similar issue.
I've had the same problem several times in the past, and have found it often occurs when I have partials inside of subdirectories. Calling add_import_path in the config.rb file for each subdirectory has usually fixed it:
// config.rb
add_import_path "sass/framework"
Of course a compass clean before watching/compiling is in order as well.
New to Jekyll and new to Ruby I tried to include autoprefixer-rails for my (s)css files directly into Jekyll. So once the page is generated by Jekyll autoprefixer would run over my generated css files. Unfortunately, I haven't managed to set things up properly and autoprefixer doesn't seem to even touch my files.
Following my Gemfile:
source "https://rubygems.org"
gem 'jekyll'
gem 'jekyll-assets'
gem 'autoprefixer-rails'
And parts of my Jekyll configuration file:
...
gems: ['jekyll-assets', 'autoprefixer-rails']
...
Which settings are missing to make it work?
Any help is appreciated!
I am able to use it with jekyll 3 by installing the octopress autoprefixer here:
https://github.com/octopress/autoprefixer.
You then put:
gems: [octopress-autoprefixer] in your config file. I am not using octopress, I only installed this to see if it would work.
In the process I also installed node.js (on a pc , win 10), so I could install autoprefixer-rails. Not sure if the octopress installer took care of this or not though, I was just trying random things to see if it would work. I think node.js was a requirement as I remember nothing happened until I rebooted and then everything worked.
It works great, though it does slow my build time down - on a small site that normally builds in .5 seconds it goes up to 12 seconds.
That's perfectly possible, and easy, too!
Most resources you'll find online will suggest to switch to Jekyll Assets, which comes with a number of default plugins, including autoprefixer-rails. That, however, replaces the entire Jekyll asset pipeline, and requires changes in lots of places. A fairly high investment up front, just to get it working. Plus, the project appears to be dormant.
Continuing my quest to find a simple solution to a simple problem, I came across jekyll-autoprefixer, available as a Ruby Gem. Integrating that into my Jekyll workflow was embarrassingly straightforward:
Update the Gemfile to include the following:
gem "jekyll-autoprefixer", "~> 1.0.2"
Add the following to _config.yml:
plugins:
- jekyll-autoprefixer
Optionally add required browser support to _config.yml (e.g. for the latest 2 versions and Edge version 14 and up):
autoprefixer:
browsers:
- last 2 versions
- Edge >= 14
Note: You can alternatively supply a .browserslistrc file in the root directory.
Optionally enable CSS Grid Layout prefixing. This appears to be unsafe, and is disabled by default. You can either enable it from CSS code using a control comment (e.g. /* autoprefixer grid: autoplace */), or globally through _config.yml:
autoprefixer:
grid: autoplace
That's all that's needed to integrate autoprefixer into Jekyll.
Documentation to add Autoprefixer to Jekyll with jekyll-assets and autoprefixer-rails has been updated:
https://github.com/jekyll/jekyll-assets#addons
autoprefixer-rails is a Rails plugin, it has nothing to do with Jekyll and can't be used in Jekyll.
If you need a similar feature in Jekyll, you currently have no other options than develop it yourself. You can grab part of the code from the Rails plugin, but the way Jekyll plugins work is significantly different.
I am running a Django website, when I deploy to the production server, the LESS file is loaded but not rendered, everything works fine in the local server, any idea why?
You'd normally compile/transpile your Less file into CSS and include the CSS in your project, rather than including your Less file.
npm install -g less
lessc base.less > base.css
It is possible to compile the Less file in your browser by including less.js but this is not recommended in production.
I have scss and css files in ASP.NET project.
If I change scss, should be css be regenerated? If yes, then how? VS can do this or should I have some other tool?
There are extensions that allow you to regenerate from inside Visual Studio, but I personally prefer the command line way.
sass --watch [folder holding .scss files]:[folder holding .css files]
If you use Compass, you can use this command instead:
compass watch
Both of these commands will tell Sass to watch the folder with the .scss files, and any time they're changed and saved, regenerate the CSS files.
If you created the project, then you likely already have Sass (and, by extension, Ruby) installed. If you don't, you'll need to install Ruby and Sass. Windows has a nice little installer that installs both Ruby and RubyGems. Once it's installed, you'll need to run the following to install Sass:
gem install sass
Once Sass is installed, you can either run the sass --watch command, or use a VS extension of your choice to watch and recompile the CSS files.
I am working with sass to write the css for a simple static website I am working on. I have run sass --watch custom.scss:custom.css which compiles fine on launch with the message:
Sass is watching for changes. Press Ctrl-C to stop.
overwrite custom.css
However, whenever I update the .scss file, nothing happens. I haven't used SASS outside the context of a rails app before, so I'm wondering if I am missing something?
My scss file is incredibly simple as well, so I doubt it is choking on anything, especially since it works on the first run.
sass -v reports Sass 3.1.16 (Brainy Betty), on Lion 10.7.2
This has now been fixed in the latest commit.
The updated stable gem (3.1.17) hasn't been released yet but there are a few choices while you wait:
Stick with 3.1.16 and use absolute paths when loading up watch, e.g:
sass --watch /User/name/project/scss:/User/name/project/css
The bug should only occur with relative paths so this works around it.
Use the updated (alpha) version
gem install sass --pre
Temporarily roll back to 3.1.15 as suggested by #Marco Lazzeri
Same problem here.
I don't know exactly what the problem is, but rolling back to the previous version is a temporary workaround:
gem uninstall sass -v=3.1.16
gem install sass -v=3.1.15
As it is mentioned by pjumble, it is a known bug in process. You can use absolute path to address this problem, before a new version is release.
This is what I usually do to avoid typing a full path:
cd work-directory
sass --watch `pwd`/sass:`pwd`/css
Hope this work for you:)
I too had the same problem.
Just by updating my gem, it worked.
gem update sass
I had this problem too with the latest SASS version at this time. Downgrading to version 3.2.9 did the trick to me on 2 different Windows 8 computers.
gem uninstall sass
gem install sass -v 3.2.9
I Had a similar problem: "Change detected", but then no writing despite it compiling and overwriting the .css file days before.
Notes:
Reinstalling sass in Ruby didn't work.
I pointed sass --watch at some other projects and they worked.
What seemed to create this problem was that I had made a copy of one project while it was being watched, then started watching the second project.
I can't say for sure but this seem to "trip up" Ruby, maybe it was the cache or some stored info about the file locations.
Solution:
I just created a newly named project folder, dragged into it all the scss files from the second project, renamed the main scss file (e.g. "uikit-main.scss" to "uikit.scss"), --watch it, and it began overwriting correctly again.
I`ve also stuck with sass (v3.4.23) not recompiling after the first run, but it was realted with scss`s folder structure - Sass can`t watch changes in files that are located by the path directing upwards the watching file. Link for details
In my case, the problem was because I'm using sass in a vagrant machine with ubuntu. I install and run sass directly from my host OS (Mac) and the watch mode starts to work.