Как связать файл Sass в приложении Sinatra?

Question

Я пытаюсь связать файл Sass с приложением Sinatra.У меня есть файл public/sass/styles.scss, и я пытаюсь связать его в моем файле views/layout.haml.Я могу связать обычный файл CSS, используя следующую ссылку в моем layout.haml: %link(rel="stylesheet" href="styles.css").Однако, когда я пытаюсь установить ссылку на мой sass/styles.scss, он не работает.Может кто-нибудь подсказать, пожалуйста, как связать файл Sass css в приложении Sinatra?Спасибо!

Answer 1

Вы можете использовать Sass :: Plugin :: Rack

Сначала установите камень Sass.

Добавьте его в свой Gemfile, если вы используете Bundler: gem 'sass'.

В вашем config.ru добавьте:

require 'sass/plugin/rack'

Sass::Plugin.options[:style] = :compressed
use Sass::Plugin::Rack

Затем создайте папку в public/stylesheets/sass/ и поместите туда все ваши файлы .scss и .sass.

Это создаст соответствующий .css в public/stylesheets/

Например: public/stylesheets/sass/style.scss будет генерировать public/stylesheets/style.css

И это все, вы можете изменить пути по умолчанию и изменить другие параметры, указанные в справочных документах

Answer 2

Вам не нужно использовать отдельный гем для компиляции ваших файлов .scss, Sass имеет это встроенное.

sass --watch style.scss:style.css установит Sass для автоматической компиляции style.scss в style.css всякий раз, когдаэто меняется.С веб-сайта Sass ,

Теперь, когда вы изменяете style.scss, Sass автоматически обновляет style.css с изменениями.Позже, когда у вас есть несколько файлов Sass, вы также можете просмотреть весь каталог

Answer 3

Вы можете сделать:

get '/stylesheets/*.css' do
  content_type 'text/css', :charset => 'utf-8'
  filename = params[:splat].first
  sass filename.to_sym, :views => "#{settings.root}/assets/stylesheets"
end

Answer 4

Вы не связываете scss, scss как sass - это не файл, который должен интерпретироваться браузером, вам нужен компилятор, который обрабатывает этот файл и конвертирует его в css.

Вам нужен драгоценный камень компаса, чтобы автоматически генерировать css из вашего scss, а затем вы связываете css, как вы ссылались раньше

Вот пример конфигурации компаса для синатры:

https://github.com/chriseppstein/compass/wiki/Sinatra-Integration