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ファイルに書いていました。 <template> <h1> タイトル
Nuxt.jsのstyleブロックでlang="postcss"を有効にするとvscodeで適切にシンタックスハイライトされる - Qiita
Nuxt.jsのstyleブロックでlang="postcss"を有効にするとvscodeで適切にシンタックスハイライトされるJavaScriptVue.jsVSCodepostcssNuxt Nuxt 2(1でも？未確認)では yarn add postcss-loader すると何も設定しなくても style ブロックでpostcssを使うことができます。しかしながら、vscodeでVueのシンタックスハイライトをしてくれるVeturはそこまで考慮してシンタックスハイライトしてくれないのでpostcssのコードにエラーが出てしまいます。もちろん、nuxtは適切にコードを解釈できるのでvscode上のエラーさえ気にしなければ開発はできます。 (↓nuxtはエラーを出さないがvscode上ではエラーが表示される例) 逆にstyleブロックにlang="postcss"と指定してしまうとvs
HUGO + PostCSS + Netlifyでポートフォリオサイトを作った話 - Qiita
はじめに 静的サイトジェネレーターのHUGO、Node.js製のCSSフレームワークであるPostCSS、ビルド + ホスティングサービスのNetlifyを使ってポートフォリオを作ったので、作り方を公開したいなと思い、作成しました。 https://shinya-sato.com/ 今回は 「どうやって作ったか」 について書いているので、ポートフォリオの構成とかについては原則書かない事にしておきます。 HUGOとは、Go言語製の静的サイトジェネレーターです。 「シンプルだが多機能」という特徴があります。 生のhtmlをそのまま編集するのと同じ要領で、「関連記事の表示」「多言語対応」等の高等な機能も持ち合わせています。 何故HUGOを選んだのか 結論からいうと、 参考にしたポートフォリオサイトがHUGOで実装されていたからです。 Jekyllはbuildが遅いし、カスタム投稿のページネーショ
Stylelintでファイルを除外する - Qiita
tl;dr 設定ファイルのignoreFilesにGlobで書きまくればいい 状況 PostCSS + SugarSS Webpack (4.8.1) なぜか.stylelintignoreが全く反映されなかったので、設定ファイルに除外先を指定することにしました。 以下のように.stylelintrc.ymlなどに書けば対象のファイルが除外されます。 --- extends: stylelint-config-sugarss-recommended plugins: - stylelint-order ignoreFiles: - node_modules/**/*.css - src/lib/**/*.css rules: - order/properties-alphabetical-order: true Register as a new user and use Qiita mo
PostCSSでCSSを変換 - Qiita
'use strict'; var gulp = require('gulp'), postcss = require('gulp-postcss'); // apply PostCSS plugins gulp.task('css', function() { return gulp.src('css/test.css') .pipe(postcss([ require('autoprefixer')({}) ])) .pipe(gulp.dest('dest/css/test.css')); }); .bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .bg-bubbles li { position: absolute; list-style: none
Webpack + PostCSSで変数を使う - Qiita
概要 postcss-simple-vars を使って、 vue-cli を使って初期化したプロジェクトのCSSで変数を使えるようにする。 ※追記 こんなことしなくて良かった。下記のように定義できる。 :root { --color-primary: #d1fb3c; --color-secondly: #d1; --color-foundation: #d1; } .test { background: var(--color-primary); } ※さらに追記 上記の変数表記は、ただW3Cが提唱している新しいCSSの仕様に従っているだけだった。 Chromiumでは実装済みのため、変数が適用されていると勘違いしてしまった。 postcss-css-variables をインストールすると、この記法が使えるらしい。 参考 https://blog.mismithportfolio.co
webpackでsassとpostcssどちらを選択するのか - Qiita
tips: 個人的に普段感じている内容です node-sass コンパイルに長めのオーバーヘッド 単純にscssを書ける 導入が楽 一部webpackのプラグインと相性悪く動作停止する postcssの設定記述が長い コンパイル早い プラグインが多すぎる sass likeに記述できるプラグインの存在 懸念 とりあえず両方を導入しようとするとメリットとデメリットで打ち消し合います。 postcssは資産に対してメンテナンスする必要が発生する一方、 sassは良い枯れ方で扱われていて楽に運用することができます。 実際にsassを書いてnode-sassでコンパイルすると異様なコンパイル時間を体験するでしょう。 それは同期的に1ファイルずつコンパイルかけている認識です。 postcssはbabelの様にサクッとコンパイルが完了します。 postcssはプラグイン何でも導入しようとすると、おそら
laravel-mixでvueにカスタムなPostCSS設定を使う - Qiita
TL;DR mix.jsなどではなく、mix.options.postCssに設定する 設定例( postcss-custom-mediaの例 ) mix.options({ postCss: [ require("postcss-custom-media")({ "extensions": { '--phone': '(min-width: 544px)', '--tablet': '(min-width: 768px)', '--desktop': '(min-width: 992px)', } }) ] }) 詳しく laravel-mixのvueにおいて、postcss.config.jsを配置しても.vueのファイルには利用されずにうまく行かなった。 コードを深追いしてみると、mix.options.postCssを設定すれば効かせてくれるとわかった。 https://githu
CSSのクラスにスコープを与えるシンプルな方法 - Qiita
CSS Advent Calendar 2017 18日目の記事です。 問題点 皆さんCSSで苦しんでますか？はい、私も苦しんでいます。 UIのコンポーネント実装が主流になってきて、JavaScript側が発達したおかげでCSSの各種問題を解決する仕組みもいろいろと出てきました。CSS in JSはそれの代表的なものですが、個人的には以下のような点に少し問題を感じています。 完全に埋め込まれてしまうとデザイナー・エンジニア間の協業難易度が増す CSS側の実装難度が増す（便利な書き方が制限されがち） これを解決するために、バンドラー側の設定を変更してうまいことimportするものもありますが、それはそれで設定ファイルが複雑化したりビルドプロセスに影響が出たりと、どうにもJSとCSSの悪魔合体感が問題に感じます。 本当に解決したいこと CSSが本質的に解消したいことは、やはり常にグローバル変数
最近話題のParcelをさわってみる - Qiita
Parcelとは parcelとは設定ファイルを必要としない高速なモジュールバンドラです。 Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration. 使ってみた個人的な感想としては 設定が容易で導入が簡単であると感じました。 目的によってできること出来ないことはあると思いますが ファイル分割やhotloaderなどの環境を手軽に構築したい際に webpackよりも簡単に導入でき 便利なツールです。 使い方 公式ドキュメントを参考に使い方を紹介します。 https://parceljs.org
今更だけど gulp の Boilerplate 作った - Qiita
実はだいぶ前に作ったあったものの、いろんなことにかまけてるうちにまとめる気力が減って途中で止まっていましたが、ちょうどまとまった時間ができたので乗り掛かった舟、勢いでまとめて公開しておきます。 https://github.com/okamoai/gulp-boilerplate フロントエンド界隈だと gulp 自体が若干レガシー化して来た感あるんですが、まだまだ案件でも使えると思うのでもし良かったら触ってやってみてください。 最近はタスクランナー使わずに npm scripts でやった方がよさげですが、実はそっちの Boilerplate も作ってあったりします。これもそのうちリポジトリに上げる予定です。 Feature 静的サイトの出力に適しています。 極力 gulp タスクのコードそのものは修正せず、 gulp/config.js ファイルと src/ 以下の開発ファイルのみで既
webpack3+Sassのビルド 〜PostCSSとExtractTextPluginを添えて〜 - Qiita
初投稿です。優しくしてください。 モジュールバンドラと聞いて、webpack、gulp、Parcel、Grunt・・・ とまあぱっと思いつくのはだいたいその辺ですが、できることってぶっちゃけどれもほぼ一緒だよね感（一長一短ありますが）。 フロントエンドツール多すぎ問題。 ってことで入門的にとりあえず流行ってるし使いやすそうなので、webpack3を触ってみました。 そもそもwebpackってなに？ CSSやJavaScript、画像などのWebコンテンツを構成するあらゆるファイルを「モジュール」という単位で取り扱い、「バンドル」という１つのファイルに最適な形で変換するためのツールです。 そのままですが、要は複数のファイルを一つのファイルにまとめるツールです。 それによりファイルのリクエスト数を減らし、ページ読み込み速度の改善が見込めます。 JavaScriptのビルドに使用されることがほと
対応ブラウザどうなってるっけ？をワンライナーでポン - Qiita
node -e "console.log('http://browserl.ist/?'+ encodeURI('q=' + require('./package').browserslist.join(',')))" 蛇足 主にAutoprefixerの対象ブラウザを指定するためにpackage.jsonに記述する browserslist というフィールドがある。 実際どのブラウザが対象なのか確認できる http://browserl.ist というサイトがある package.json内は配列で書かれてるが、browserl.istにはカンマ区切りで渡す必要がある したがってエイヤでポン。 ついでに package.json以外に、.browserslistrcに書く方法などもあるので、その場合はこれでは対応できない。 とはいえ、やってることはシンプルなので、テキトーにスクリプト書い
Nuxt.jsでCSSの設計を楽にする - Qiita
vueファイルにどんどんCSSを書いていくと管理が大変です。 スコープを適用していれば問題無いですが、CSSファイルが一つのフォルダに纏められてないのは嫌だ！ そこで今回紹介するのは、POSTCSS + ITCSSを使った設計方法をNuxt.jsに適用するというものです。 POSTCSS POSTCSSはCSSツールを作るためのフレームワークです。様々なプラグインを使ってCSSに変更を当てると言うと簡単でしょうか。 sassみたいにネストして書けるプラグインや、ベンダープリフィックスを自動でつけてくれるプラグインなど多種多様です。 プラグインは自分で取捨選択できるため、プロジェクトごとにカスタマイズできることがメリットです！ 詳しくは、ここにわかりやすく解説されています。 ITCSS ITCSSはCSS methodology(方法論)の一つで、BEMやOOCSSなどもそこに含まれます。
PostCSSでCSSの中の画像URLのcache busteringを行う方法 - Qiita
でもこのままだと、例えば画像の配信で何かしらのキャッシュが設定されていた場合（Cache-ControlのHTTPヘッダーなど）に、画像を変更してもキャッシュが使用されてすぐに変更をクライアント側に反映できない。 そこでcache busteringを行う。URLの末尾に何かしらのクエリーストリングなどを付けて別のURLにすることで、ブラウザーのキャッシュを回避する方法だ。 上のように変更すれば、新しい画像がブラウザーに読み込まれるようになる。 でも画像の変更があるたびにいちいちCSSをいじるのは面倒なので、自動化したい。そこでPostCSSのプラグインであるPostCSS Cachebusterを使ってみる。 導入は簡単に yarn add -D postcss-cachebuster なり npm install --save-dev postcss-cachebuster なりで。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
create-react-appでPostCSS環境を作る - Qiita
PostCSS + Webpack でグローバルなCSS変数 - Qiita
postcss-normalizeを使って対象ブラウザに関係あるルールだけのnormalize.cssを使う - Qiita
webpackでPostCSSのポの字からはじめてみる - Qiita
LaravelでStorybook（for Vue.js+PostCSS） - Qiita
