こんにちは、弁護士ドットコムでデザイナーをしているhosogaiです。 ふだんは https://www.bengo4.com/ サービス内のUI改善などをしています。 先日このブログ「弁護士ドットコム株式会社 Creators’ blog」のデザインカスタマイズを行った際にCSSの新機能をいくつか試す機会があったので、今回ここで紹介させていただこうと思います。 きっかけ PostCSSとは postcss-preset-envの使い方 npm packageで使う場合 CodePenで使う場合 試せるCSSの機能 Stage0（意欲的） Stage1（実験） Stage2（許容） Stage…

こんにちは、株式会社ラクスで先行技術検証を行っている技術推進課の@t_okkanです。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在ラクスでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、PostCSSについて検証を行いましたので、その結果の報告を行います。PostCSSの仕組みや利点を中心に紹介するため、実践的な話の紹介は少ないです。PostCSSの実践的な話はまた別の記事で紹介できればと思います。 なお、別テーマの取り組みや、過去の取り組みに関しては、こちらからご覧ください。 tech-blog.rakus…

Nuxt.js^2.14.12に postcss-nestedを追加したかったので、公式に則って設定をするとビルド時にエラーが出ます。 How to add PostCSS plugins? - NuxtJS まず、プラグインの追加。 yarn add postcss-nested --devnuxt.config.jsに追加したのはこちら。 build: { postcss: { plugins: { 'postcss-nested': {} } } }エラー内容 Error: PostCSS plugin postcss-nested requires PostCSS 8.Nuxt.js^…