@import のディレクトリ内にファイルがないと assets:precompile でコケる - Qiita
同じ轍を踏まないためにも、人柱になった自分を供養するためにも、ここにメモしておきたいと思います。 ちなみにアホかと思いますが、この件で4~5時間くらい悩んでいました。 前提 以下の条件でCSSをコンパイルしたい要件だったので、普通に何も考えずに assets:precompile するわけにはいきませんでした。 Railsでassets:precompileする対象のマニフェストファイルに、 require_self require_tree などのディレクティブは書かない 必要なディレクトリ・ファイルはすべて @import して読み込む順番を制御する assets/stylesheets/ 以下のCSSファイルをごっそり整理するために、ファイルを削除しまくったり、一時的に空のディレクトリを用意したりしておく必要がある TL;DR 結論を先に書くと、 @import する対象のディレクト
Nuxt.jsのstyleブロックでlang="postcss"を有効にするとvscodeで適切にシンタックスハイライトされる - Qiita
Nuxt 2(1でも？未確認)では yarn add postcss-loader すると何も設定しなくても style ブロックでpostcssを使うことができます。しかしながら、vscodeでVueのシンタックスハイライトをしてくれるVeturはそこまで考慮してシンタックスハイライトしてくれないのでpostcssのコードにエラーが出てしまいます。もちろん、nuxtは適切にコードを解釈できるのでvscode上のエラーさえ気にしなければ開発はできます。 (↓nuxtはエラーを出さないがvscode上ではエラーが表示される例) 逆にstyleブロックにlang="postcss"と指定してしまうとvscode上では適切な表示を得ることができますが、nuxtがwebpackに登録したローダーでは検知できなくなってしまうのでnuxtがエラーを吐きます。 そこで一つの解決策としてlang="pos
HUGO + PostCSS + Netlifyでポートフォリオサイトを作った話 - Qiita
はじめに 静的サイトジェネレーターのHUGO、Node.js製のCSSフレームワークであるPostCSS、ビルド + ホスティングサービスのNetlifyを使ってポートフォリオを作ったので、作り方を公開したいなと思い、作成しました。 https://shinya-sato.com/ 今回は 「どうやって作ったか」 について書いているので、ポートフォリオの構成とかについては原則書かない事にしておきます。 HUGO HUGOとは、Go言語製の静的サイトジェネレーターです。 「シンプルだが多機能」という特徴があります。 生のhtmlをそのまま編集するのと同じ要領で、「関連記事の表示」「多言語対応」等の高等な機能も持ち合わせています。 何故HUGOを選んだのか 結論からいうと、 参考にしたポートフォリオサイトがHUGOで実装されていたからです。 Jekyllはbuildが遅いし、カスタム投稿のペー
最近学んだCSSメディアクエリについて - Qiita
はじめに 最近、初めてメディアクエリについて学んだことをメモとして残しておきたいと思います。 メディアクエリについて Webページを閲覧する際に、ユーザーはPCやスマートフォン、タブレットなど様々な端末を用いています。その際に端末に応じて、Webページ上に表示する内容を表示する必要があります。レスポンシブなWebページを作成するために、メデイアクエリが使用されます。レスポンシブなWebサイトを作成する際に使用される有名な例だとbootstrapが挙げられます。 QiitaをPCで表示した場合 Qiitaをスマートフォンで表示した場合 上記のようにPCとスマートフォンで表示した場合、それぞれのデザインが異なっています。 レスポンシブなWebデザインとは？ メディアクエリを調べた際に、レスポンシブなWebデザインと見かけることが多かったのですが、そもそもレスポンシブとは何かと疑問に思い調べまし
sassの繰り返し処理を使ったクラス付与のメモ - Qiita
.class0-0 { width: 0.0px; } .class0-1 { width: 0.1px; } .class0-2 { width: 0.2px; } .class0-3 { width: 0.3px; } .class0-4 { width: 0.4px; } .class0-5 { width: 0.5px; } .class0-6 { width: 0.6px; } .class0-7 { width: 0.7px; } .class0-8 { width: 0.8px; } .class0-9 { width: 0.9px; } .class1-0 { width: 1.0px; } .class1-1 { width: 1.1px; } .class1-2 { width: 1.2px; } .class1-3 { width: 1.3px; } .class1-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
node-sassを使って複数scssをビルド - Qiita
Sassでよく使う関数リスト - Qiita
Laravelでscssを書くときにstylelintで自動シンタックスチェック - Qiita
Sassのビルド時にCSSの出力形式を指定する - Qiita
sass mixin使って見たらすごく楽しかった。。 - Qiita
stylusについて - Qiita
SCSSの基本的な書き方 - Qiita
Nuxt.js + TypeScript + Sass でプロジェクトをスタートする - Qiita
gulpで静的サイトジェネレーター構築 - Qiita
【CSS scss】均等カラム割りレイアウトmixin - Qiita
gulpのタスクを追加して便利な環境にしよう - Qiita
PostCSSでSassをもっと楽に - Qiita
要素を左右に寄せる方法 - Qiita
要素を簡単に中央寄せする方法 - Qiita
background-imageをレスポンシブする際にpadding-topが認識されない現象を対処する(Edge) - Qiita