Dart Sass（@use）の基本的な書き方と@importから乗り換える方法 | HPcode（えいちぴーこーど）
Sassでファイルを呼び出す際に使っていた@importは廃止される予定でして、代わりに「@use」「@forward」を使うように推奨されています。自分も重い腰を上げて@useを使ってみました。 （※ Google日本語翻訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後のいずれか早い方（遅くとも2021年10月1日）に、@importグローバルコアライブラリ関数呼び出しと同様に非推奨になります。それはモジュールを通して作ることができます。 この非推奨が発効してから1年後（ 遅くとも2022年10月1日）、@importほとんどのグローバル機能のサポートを完全に終了します。これには、すべての実装のメジャーバージョンリリースが含まれます。 https://sass-la
npm-scriptsでDart Sassのコンパイル環境構築
概要 今回は、npm-scriptを使用したSassの環境構築手順を紹介します！ 説明するにあたって、大切な前知識があるのでまずはその紹介から入ります。 1. npm-scripts での環境構築 Sassの環境構築というとGulpを使用されている例が多いかと思います。 しかし 2020 年頃から、かの有名なフロントエンドロードマップでもそこまで注目されなくなり npm-scriptsで殆どの事が解決できるのではないかという雰囲気に。 という事で今回はnpm-scriptsでの環境構築を行っていきます。 2. DartSass を使用したコンパイル 意外と知られていない事なのですが、厳密にはSassは3種類あります。 基本的な記述方法は同じですが、@import等細かな箇所で違いがあり、 独自の機能・記述方法を使用している場合には、乗り換えは少し手間になる事があります。 1. Ruby S
Web制作向けnpm-scripts - Qiita
更新版 Web制作向けnpm-scripts 3 npm-scriptsのWeb制作向けタスクランナー Web制作は細かいやることが多いので、少しでも自動化して手作業を減らしたいと考えました。 一人で完結する作業であれば、PreprosやKoala(開発終了)などGUIのツールや、エディタの標準、拡張機能で実現できる事も多いですが、複数人で作業を行う場合、無駄な作業やトラブルを避けるために環境を統一する、コーディング規約を遵守するなどかなり面倒です。 そこでよく使われるGulpやWebpackですが、学習コストがかかる上に、Web制作ではそこまでの機能はいらない場合が多いので、比較的入門しやすいと感じたnpm-scriptsでWeb制作向けのタスクランナーを作ってみました。 やりたい事 Web制作の効率化のため、作業の自動化を設定します。 HTML CSS JavaScript
npm よく使うコマンドまとめ
対象 Windows系の説明です。Macとほとんど同じです。 パス記号の記載などが違うかもです。 用語 npmとは node.js のパッケージマネージャーで、モジュールというかパッケージというか JavaScriptの便利ライブラリのインストールをコマンドで行えるもの。 node_modules フォルダ カレントディレクトリ配下にあり、カレントディレクトリにインストールされるモジュールの中身が配置されるフォルダ。 package.json カレントディレクトリ配置されるファイル。package.jsonにはインストールするモジュールを記入することができる。 このファイルがあるおかげで、node_modulesの中身はGitなどに登録しなくても開発環境の移行が容易になる。 package-lock.json カレントディレクトリ配置されるファイル。package.jsonでインストール指
npm-scriptで開発環境を作ってみよう | オレインデザイン
最近、Gulpが4.xにバージョンアップしましたね。そのタイミングで開発環境でもGulpをアップデートしてエラーに困っている声を聞いたりします。 僕自身もGulpを使っている環境で4.xにアップデートして、それまで使っていたライブラリからエラーが出て四苦八苦しました。その時、ふと思ったんです。「Gulpに依存してるなー」と。そして、「だったらnpm-scriptの方がいいかも」と思い、npm-scriptで開発環境を作る流れを書いてみようと思います。 タスクの流れ Sassの処理 node-sassでコンパイルプリフィックス付与と圧縮処理ディレクトリを削除して新しくディレクトリを作るSassの処理をまとめて一連のタスクを流して処理 JavaScriptの処理 バンドルする圧縮する一連のタスクを流して処理 画像の処理画像圧縮の処理画像圧縮の一連の流れのタスクを作るファイルを監視するブラウザシ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PostCSS 実践 - Qiita