CODEWITHSUNDEEP
htmlruby-on-railsrubysass
IDGM5
IDGM5

Reputation: 199

How to use 'SASS' from html template on a rails app?

I'm trying to install an html template in my rails app, so I moved all the assets on public folder and renamed all the html files in erb.

Everything works fine except that 'sass' is not working, any file from the SASS folder of the html template is not doing their work.

So how can I make use of the SASS files of the html template on my rails app?

Upvotes: 2

Views: 689

Answers (2)

SoAwesomeMan
SoAwesomeMan

Reputation: 3396

So how can I make use of the SASS files of the html template on my rails app?

1) Install the SASS Gem gem 'sass' in your Gemfile if you're using bundle install, or via the command line: gem install sass

2) Create a file named 'manifest.txt' in your SASS folder, for example public/src/sass/manifest.txt

3) In manifest.txt list each file in the order of inclusion you want merged into a single CSS file, like:

framework.sass
framework_overides.sass
homepage.sass
contact.sass
global.sass

4) Open your Rakefile and create this rake task:

require 'sass'
desc "Parse SASS manifest.txt and convert to single CSS file"
task :sass do
  # your template directory
  src_dir = File.join Rails.root, 'public/src'

  # SASS directory
  sass_dir = File.join src_dir, "sass"

  # name of the single output file
  app_css_file = File.join src_dir, "css/application.css"

  # parse SASS manifest
  sass_manifest = IO.readlines File.join(sass_dir, "manifest.txt")

  # clear previous app_css_file, without having to require 'fileutils'
  File.open(app_css_file, 'w') {|f| f.write ""}

  # write to app_css_file
  File.open(app_css_file, 'a+') do |f|
    sass_manifest.each do |x|

      # remove code comments
      next if x.strip =~ /^#/

      # parse extension
      case syntax = File.extname(x.strip).delete('.').downcase

      # convert and append scss
      when /scss/ then
        f.write Sass::Engine.new(IO.read(File.join(sass_dir, x.strip)), :syntax => :scss, :cache => false).render

      # convert and append sass
      when /sass/ then
        f.write Sass::Engine.new(IO.read(File.join(sass_dir, x.strip)), :cache => false).render
      end
    end
  end
end

5) Use this command: rake sass

Upvotes: 1

M. Karim
M. Karim

Reputation: 942

For a bootstrap template I also faced the same kind of problem. So I'm sharing my experience, it may help you. What I did was I removed this gem (if you are using this)

gem 'bootstrap-sass'

and replaced with this two gems,

gem 'therubyracer'
gem 'less-rails-bootstrap'

you also need to initialize them in application.js and application.css according to its official doc.

Take a look at this blog. Its a step-by-step about how to integrate custom bootstrap template in rails. It might help you.

Upvotes: 1

Related Questions