Wie verwende ich 'SASS' von HTML-Vorlage auf einer Schiene App?

Question

Ich versuche eine HTML-Vorlage in meiner Rails-App zu installieren, also habe ich alle Assets in den öffentlichen Ordner verschoben und alle HTML-Dateien in erb umbenannt.

Alles funktioniert gut, außer dass "Sass" nicht funktioniert, jede Datei aus dem SASS-Ordner der HTML-Vorlage macht nicht ihre Arbeit.

Also, wie kann ich die SASS-Dateien der HTML-Vorlage auf meiner Rails App nutzen?

Answer 1

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

1) die SASS Gem gem 'sass' in Ihrem Gemfile wenn Sie bundle install verwenden, oder über die Befehlszeile: gem install sass

2) Erstellen Sie eine Datei mit dem Namen 'manifest.txt' in Ihrem SASS Ordner zum Beispiel public/src/sass/manifest.txt

3) in manifest.txt Liste jede Datei in der Reihenfolge der Aufnahme Sie verschmolzen zu einer einzigen CSS-Datei möchten, wie:

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

4) Ihre Rakefile öffnen und diese Rechen-Aufgabe erstellen:

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) Verwenden Sie diesen Befehl: rake sass

Answer 2

Für eine Bootstrap-Vorlage hatte ich auch die gleiche Art von Problem. Also teile ich meine Erfahrung, es kann dir helfen. Was ich tat, war ich dieses Juwel entfernt (wenn Sie diese verwenden)

gem 'bootstrap-sass' 

und mit diesen beiden Edelsteine ​​ersetzt,

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

Sie müssen auch sie in application.js und application.css initialisieren nach seiner offizielle doc.

Werfen Sie einen Blick auf diese blog. Es ist eine Schritt-für-Schritt-Anleitung für die Integration einer benutzerdefinierten Bootstrap-Vorlage in Rails. Es könnte dir helfen. Installieren