このあいだ書いた記事の締めで予告したとおり Stylus からの移行先として PostCSS + cssnext を試す。 サンプル プロジェクト : examples-web-app/postcss 2017/12/29 追記 : cssnext は CSS.next と呼べるか？ 本記事のコメント欄にて @mysticateaさん から指摘され、cssnext の機能すべてを CSS.next と呼ぶのは妥当ではないと判断した。 w3c/csswg-drafts: CSS Working Group Editor Drafts [css-nesting] Status? · Issue #998 · w3c/csswg-drafts 私が CSS.next だと思っていた CSS Nesting Module は CSS Working Group (以下、csswg) の draft
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
WebpackではEntryにあるファイルから順番にImportやRequireされたファイルをたどっていき、拡張子ごとに違うローダーを通して、最終的なBundleファイルを作成する*という処理をします。 *) WebpackではChunkという言い方をしていますが。。。 なのでこの設定は、Entryパス上のファイルからCSSファイルがRequireされていた場合、postcss-loader、css-loader、そしてstyle-loaderの３つのLoaderを通しましょうという意味になります。ここで重要なのは、処理される順番で最後のものから順番に処理されるという点です。 👉 WHAT ARE LOADERS? 基本的にはpostcss-loaderの出力がcss-loaderの入力になり、css-loaderの出力がstyle-loaderの入力になり、その出力が最終的なBund
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
