🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Middleman

MiddlemanはモダンなWeb開発のショートカットやツールを採用した静的サイトジェネレータです。

Q&A

1回答

465閲覧

middleman で cssが当たらない

yayaya

総合スコア19

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Middleman

MiddlemanはモダンなWeb開発のショートカットやツールを採用した静的サイトジェネレータです。

0グッド

0クリップ

投稿2019/11/05 21:27

編集2019/11/05 21:55
bundle exec middleman server ```でローカルサーバーが立ち上がるのですが、sass がコンパイルされていない状態です。 立ち上がった際のページのhead要素に`all.css`が入っているのですがコンパイル前の状態なので、おそらくsassからコンパイルが行われていないと予想しています。 CSSをあてたく、ご助言いただけないでしょうか。 Gemfile周りのファイルを下記に記載します。 ### config.rb

Compass

Change Compass configuration

compass_config do |config|

config.output_style = :compact

end

Page options, layouts, aliases and proxies

Per-page layout changes:

With no layout

page "/path/to/file.html", :layout => false

With alternative layout

page "/path/to/file.html", :layout => :otherlayout

page "/2020/*", layout: :"2020"

Proxy pages (http://middlemanapp.com/dynamic-pages/)

proxy "/this-page-has-no-template.html", "/template-file.html", :locals => {

:which_fake_page => "Rendering a fake page with a local variable" }

# Assumes the file source/presentations/template.html.haml exists

data.year_2020.presentations.except('lightning_talks').each do |id, presentation|

proxy "2020/presentations/#{id}.html", "2020/presentations/template.html", locals: { presentation: presentation }, ignore: true

end

Helpers

set :markdown_engine, :redcarpet

Automatic image dimensions on image_tag helper

activate :automatic_image_sizes

Reload the browser automatically whenever files change

activate :livereload

Methods defined in the helpers block are available in templates

helpers do

def some_helper

"Helping"

end

end

require "digest/md5"
helpers do
def imgset_tag(source, options = {})
srcset = source+".png 1x, "+source+"@2x.png 2x"
image_tag(source+".png", options.merge(srcset: srcset))
end

def avatar_image_tag(member, options = {})
options[:alt] = options.fetch(:alt, member.name)
image_tag(avatar_path(member), options)
end

def gravatar_image_tag(hash, options = {})
url = "https://www.gravatar.com/avatar/#{hash}?s=268&d=https%3A%2F%2Frubykaigi.org%2F2020%2Fimages%2Fspeakers%2Fdummy-avatar.png"
image_tag(url, options)
end

def get_current(link)
re = ''
if '/'+current_page.path.gsub('.html', '') == link
re = 'is-current'
end
return re
end

private def avatar_path(member)
local_image = "team/#{member.id}.jpg"
return local_image if File.exist?(File.join(root, config[:source], asset_path(:images, local_image)))

default_image = "sushidot_maguro.png" return default_image unless member.email id = Digest::MD5.hexdigest(member.email.downcase) "https://secure.gravatar.com/avatar/#{id}?s=268"

end
end

activate :sprockets

activate :directory_indexes

redirect "2020/code-of-conduct.html", to: "2020/policies.html"

set :css_dir, '2020/stylesheets'

set :js_dir, '2020/javascripts'

set :images_dir, '2020/images'

set :fonts_dir, '2020/fonts'

Build-specific configuration

configure :build do

For example, change the Compass output style for deployment

activate :minify_css

Minify Javascript on build

activate :minify_javascript

Enable cache buster

activate :asset_hash

Use relative URLs

activate :relative_assets

Or use a different image path

set :http_prefix, "/Content/images/"

end

### Gemfile

source 'https://rubygems.org'

gem 'middleman', '> 4.2'
gem 'middleman-autoprefixer', '
> 2.7'
gem 'middleman-sprockets'
gem 'redcarpet'
gem 'sass'
gem 'sprockets'

Live-reloading plugin

gem "middleman-livereload"

group :production do
gem 'rack-contrib'
gem 'thin'
end

group :development do
gem 'pry'
end

gem 'rake'

### Gemfile.lock

GEM
remote: https://rubygems.org/
specs:
activesupport (5.0.7.2)
concurrent-ruby (> 1.0, >= 1.0.2)
i18n (>= 0.7, < 2)
minitest (
> 5.1)
tzinfo (> 1.1)
addressable (2.7.0)
public_suffix (>= 2.0.2, < 5.0)
autoprefixer-rails (9.7.1)
execjs
backports (3.15.0)
coderay (1.1.2)
coffee-script (2.4.1)
coffee-script-source
execjs
coffee-script-source (1.12.2)
concurrent-ruby (1.1.5)
contracts (0.13.0)
daemons (1.3.1)
dotenv (2.7.5)
em-websocket (0.5.1)
eventmachine (>= 0.12.9)
http_parser.rb (
> 0.6.0)
erubis (2.7.0)
eventmachine (1.2.7)
execjs (2.7.0)
fast_blank (1.0.0)
fastimage (2.1.7)
ffi (1.11.1)
haml (5.1.2)
temple (>= 0.8.0)
tilt
hamster (3.0.0)
concurrent-ruby (> 1.0)
hashie (3.6.0)
http_parser.rb (0.6.0)
i18n (0.9.5)
concurrent-ruby (
> 1.0)
kramdown (1.17.0)
listen (3.0.8)
rb-fsevent (> 0.9, >= 0.9.4)
rb-inotify (
> 0.9, >= 0.9.7)
memoist (0.16.0)
method_source (0.9.2)
middleman (4.3.5)
coffee-script (> 2.2)
haml (>= 4.0.5)
kramdown (
> 1.2)
middleman-cli (= 4.3.5)
middleman-core (= 4.3.5)
middleman-autoprefixer (2.10.1)
autoprefixer-rails (> 9.1)
middleman-core (>= 3.3.3)
middleman-cli (4.3.5)
thor (>= 0.17.0, < 2.0)
middleman-core (4.3.5)
activesupport (>= 4.2, < 5.1)
addressable (
> 2.3)
backports (> 3.6)
bundler
contracts (
> 0.13.0)
dotenv
erubis
execjs (> 2.0)
fast_blank
fastimage (
> 2.0)
hamster (> 3.0)
hashie (
> 3.4)
i18n (> 0.9.0)
listen (
> 3.0.0)
memoist (> 0.14)
padrino-helpers (
> 0.13.0)
parallel
rack (>= 1.4.5, < 3)
sassc (> 2.0)
servolux
tilt (
> 2.0.9)
uglifier (> 3.0)
middleman-livereload (3.4.6)
em-websocket (
> 0.5.1)
middleman-core (>= 3.3)
rack-livereload (> 0.3.15)
middleman-sprockets (4.1.1)
middleman-core (
> 4.0)
sprockets (>= 3.0)
minitest (5.13.0)
padrino-helpers (0.13.3.4)
i18n (> 0.6, >= 0.6.7)
padrino-support (= 0.13.3.4)
tilt (>= 1.4.1, < 3)
padrino-support (0.13.3.4)
activesupport (>= 3.1)
parallel (1.18.0)
pry (0.12.2)
coderay (
> 1.1.0)
method_source (> 0.9.0)
public_suffix (4.0.1)
rack (2.0.7)
rack-contrib (2.1.0)
rack (
> 2.0)
rack-livereload (0.3.17)
rack
rake (13.0.0)
rb-fsevent (0.10.3)
rb-inotify (0.10.0)
ffi (> 1.0)
redcarpet (3.5.0)
sass (3.7.4)
sass-listen (
> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (> 0.9, >= 0.9.4)
rb-inotify (
> 0.9, >= 0.9.7)
sassc (2.2.1)
ffi (> 1.9)
servolux (0.13.0)
sprockets (4.0.0)
concurrent-ruby (
> 1.0)
rack (> 1, < 3)
temple (0.8.2)
thin (1.7.2)
daemons (> 1.0, >= 1.0.9)
eventmachine (
> 1.0, >= 1.0.4)
rack (>= 1, < 3)
thor (0.20.3)
thread_safe (0.3.6)
tilt (2.0.10)
tzinfo (1.2.5)
thread_safe (~> 0.1)
uglifier (3.2.0)
execjs (>= 0.3.0, < 3)

PLATFORMS
ruby

DEPENDENCIES
middleman (> 4.2)
middleman-autoprefixer (
> 2.7)
middleman-livereload
middleman-sprockets
pry
rack-contrib
rake
redcarpet
sass
sprockets
thin

BUNDLED WITH
2.0.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

bundle exec middleman build してみたら、CSSは生成されませんか?
https://middlemanapp.com/jp/basics/build-and-deploy

投稿2019/11/14 02:59

tgfjt

総合スコア79

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問