Nuxt ver.2 へプロジェクトを移行したときにCSSで対応したこと（PostCSS編） - Qiita
前提条件 Nuxtのver.1を使って個人的なプロジェクトを作っていました。SSRは使わずSPAモードでGenerateして、静的ファイル一式をサーバーにアップする形です。 しばらくプロジェクトを進めて、一旦区切りが出来たので、使っているモジュール（node_modules）を全てアップデートしました。その中でも、すんなりとは行かなかったNuxtのアップデートについて書きたいと思います。 アップデートしたバージョン：1.4.1から2.2.0へ アップデートしたら起きたこと 私はNuxtでスタイリングするときに、NuxtのデフォルトであるPostCSSとcssnextの組み合わせで書いていました。ですので、nuxt.config.jsにはCSS周りの設定は入れていません。 各コンポーネントのスタイリングは、下記のようにvueファイルに書いていました。
【デザイナー向け】どうしてもgulp、npm、sass、pugを操作しなければならない人への説明書
1.はじめに デザイナーさん、以下のような事態に困ったご経験はないでしょうか。 「画像の差し替え・削除・追加が発生して、ちょっと直したいけど、どこを編集すればいいかわからない」 「文言修正が入った。エンジニアさんに振るまでの量でもないので自分で直したいが、どこを編集すればいいかわからない」 「フォルダによくわからないファイルがたくさんある。いじるのが怖い。」 近頃のweb開発環境は複雑化し、gulpやwebpack・npmなど、デザイナーにとってはよくわからない単語が増えてきました。 このようなツールを駆使してフロントエンド環境を構築しているエンジニアにとって、作業は効率化されましたが、逆にデザイナーにとってはどんどん敷居が高くなっていると思います。 本投稿では、そんな環境下でもなんとなくイマドキの用語を軽く理解して、ちょこっとの編集作業ができるようになることを目標にします。 ゴール gu
OOCSSについて調べた - Qiita
OOCSSとは object oriented CSSの略。 BEMの実例を調べようとしたらairbnbのGitHubに名前を見かけたので調べた。 何やら原則があるらしい。 原則1 再利用できるようにする 転載元 https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/ before # button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } # widget { width: 500px; min-height
CSSだけでお絵描き（CodePen） - Qiita
Qiita初投稿になります。よろしくお願いします。 お手柔らかに...( ;∀;) CSSだけでお絵描き CSSだけで絵を描いている方をちらほら見かけまして え、おもしろ、私もやりたいと思い初挑戦してみました。 この記事は記録用として書いています。タメになることはないかも... SCSSで書いてます。 CodePen HTMLとかCSSとかJSをウェブ上で書けるサービス。 書いたコードがすぐにプレビュー画面に反映されるのでとても便利です。 https://codepen.io/ CodePenを触ったことがなかったので、今回はこの子を使って挑戦しました。 今後もお世話になりそう。 ということで、アンパンマン いざ！お絵描き！といきたいところですが、お題決めにいつも悩みます。 目の前にあんぱんがあったのでアンパンマンにしました。（Chrome推奨です） See the Pen CSS Anp
@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が遅いし、カスタム投稿のペー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
haml（html）でfloatプロパティを使って要素を左右に配置する方法。 - Qiita
Nuxt.jsのプロジェクトにSassを導入する方法 - Qiita
Sass 入門 - Qiita
Nuxt.jsでSassの変数やMixinsを管理する（resources-loader） - Qiita
Sassでeachを用いた色管理でハマった（Always quote color names when using them as strings） - Qiita
【今日から携わる】５分でおわるよ！gulpでsassのコンパイルしませんか？（コピペでオーケー） - Qiita
node.jsのgulpでブラウザsyncとscssの自動コンパイル - Qiita
非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - Qiita
Node.js+gulpを利用したSass利用環境の構築 - Qiita
Nuxt(v2.4未満) + Typescriptセットアップ - Qiita
node-sassを使って複数scssをビルド - Qiita
Sassでよく使う関数リスト - Qiita
Laravelでscssを書くときにstylelintで自動シンタックスチェック - Qiita
