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

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

Ответ 1

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

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

Здесь у вас есть пример конфигурации компаса для синатра:

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

Ответ 2

Вы можете использовать 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

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

Ответ 3

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

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

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

Ответ 4

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

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