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
webpack の基本的な使い方（入門）
webpack の基本的な使い方 以下は webpack のインストール方法や webpack.config.js の設定方法、Loaders ローダー、Plugins プラグイン、splitChunks、webpack-dev-server、v5 で導入された Asset Modules などの基本的な使い方の覚書です。 Node.js がインストールされていることを前提にしています。 ※ webpack5 (バージョン 5) 用に内容を更新しました（2021年12月31日）。 以下で使用しているパッケージのバージョン node: 16.13.2 npm: 8.1.2 webpack: 5.65.0 webpack-cli: 4.9.1 webpack-dev-server: 4.7.2 関連ページ： nvm を使って Node.js を Mac にインストール Node.js を Ma
webpack を使って Sass をコンパイルする方法
webpack を使って Sass をコンパイルする方法 Sass を webpack を使ってコンパイルする方法の覚書です。webpack は JavaScript だけではなく、CSS や Sass をバンドルすることができます。 webpack 5 で新しく導入された Asset Modules など内容を version 5 に合わせて書き換えました。また、PostCSS Preset Env の使い方も追加しました（2022年1月5日）。 以下は Node.js がインストールされていることを前提にしています。また、主なパッケージのバージョンは以下になります（環境は Mac での例になります）。 sass（dart-sass）：1.45.2 webpack：5.65.0 webpack-cli：4.9.1 webpack-dev-server：4.7.2 node: 16.13.
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
gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ
gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ 2018年1月8日 ※この記事は2018年1月8日に公開しましたが、2020年9月14日に内容をメンテナンスしています。 gulp 2018年1月1日に、gulp v4.0.0がプレリリースされました。この記事では、gulp v4への移行方法と、主な変更点をいくつか紹介します。 gulp v4への移行方法 まず、gulp v3からv4への移行方法について説明します。 gulpのグローバルインストール グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。 $ npm rm -g gulp $ npm install -g gulp-cli 参照：Quick Start | gulp.js gulpのローカルインストール ローカルインストールされているgulp v3を削除して、g
npm よく使うコマンドまとめ
対象 Windows系の説明です。Macとほとんど同じです。 パス記号の記載などが違うかもです。 用語 npmとは node.js のパッケージマネージャーで、モジュールというかパッケージというか JavaScriptの便利ライブラリのインストールをコマンドで行えるもの。 node_modules フォルダ カレントディレクトリ配下にあり、カレントディレクトリにインストールされるモジュールの中身が配置されるフォルダ。 package.json カレントディレクトリ配置されるファイル。package.jsonにはインストールするモジュールを記入することができる。 このファイルがあるおかげで、node_modulesの中身はGitなどに登録しなくても開発環境の移行が容易になる。 package-lock.json カレントディレクトリ配置されるファイル。package.jsonでインストール指
nodenvの環境構築 - Qiita
この記事では個人的にお勧めなnodenvのインストール方法と使い方について簡単に紹介していきたいと思います。 anyenvを使ったインストール方法も別の記事で紹介していますので、こちらも参考にしていただければと思います。 nodenvのダウンロード まず、nodenvのソースをGitHubからcloneしてきます。
Node.jsとnpmをアップデートする方法
いつも忘れてしまうので書き留めておきます。macOS Monterey（12.4）で確認をして内容を更新しました。この記事で紹介しているツール「n」もv8.2.0になりました！ Node.jsのアップデート n という便利なバージョン管理ツールがあるので、これを使ってバージョンを確認してアップデートします。nの詳しい使い方はこちらの記事 あたりをご参照いただくと良いと思います。n を使う際の注意点もしっかり説明されています。 nのインストール $ npm install -g n Node.jsのバージョンの確認 1行目の「–stable」でStable（推奨版）のバージョン、2行目の「–latest」で最新版のバージョンが確認できます。 $ n --stable $ n --latest Latestのインストール $ n latest latestは最新の機能を搭載した最新版へのアップ
anyenv + macOS環境構築 - Qiita
フルスタックで開発しているとphp、ruby、python、node.jsなど様々なプログラム言語を使用する機会が増えてきます。特に異なったプロジェクトを同一マシンで行おうとすると各プログラム言語のバージョンなどが競合して上手く開発が行えなくなります。 そこでanyenvの登場です。anyenvをインストールすることでメジャーどこの**env系を一括して管理できるようになりとても開発が楽になります。 追記：anyenv製作者のRyosuke IWANAGAさんが新たにanyenvのgithubリポジトリを作成されたので、記事を修正しました。 旧リポジトリ：https://github.com/riywo/anyenv 新リポジトリ：https://github.com/anyenv/anyenv 現時点でanyenvがサポートしている**env系は以下。 新リポジトリanyenv/anye
anyenvでNodeやRubyやPythonのバージョン管理 - Qiita
概要 github：https://github.com/anyenv/anyenv anyenvはnodenv, rbenv, pyenvなど*env系を管理するライブラリ nodenv, rbenv, pyenvは、Node, Ruby, Pythonのバージョンを管理してくれる。 anyevnでnodenvをインストールしてnodenvでほしいバージョンのNodeをインストールして管理しておくという感じ anyenv インストール $ git clone https://github.com/riywo/anyenv ~/.anyenv $ echo 'export PATH="~/.anyenv/bin:$PATH"' >> ~/.bash_profile $ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile $ exec $SHE
webpackでCSSとJavaScriptのコーディング環境を作る
webpackの環境を作成したので、そのやり方と自分の環境のメモです。 webpackとはオープンソースのJavaScriptモジュールバンドラーです。主にJavaScript用のモジュールバンドルですが、対応するローダーが含まれている場合、HTML、CSS、画像などのフロントエンドアセットを変換できます。[7] webpackは依存関係のあるモジュールを受け取り、それらのモジュールを表す静的アセットを生成します。 webpack 作成したデータはこちら GitHub – webdrawer-kashu/webpack node.jsをインストールする node.jsを使うので、インストールしていない場合はnode.jsのページからインストールします。 nodejs.org ダウンロードするのは推奨版でよいと思います。 package.jsonを作成する 次にpackage.jsonを作成
[WordPress]PHPCodeSniffer(phpcs)でWPコーディング規約をチェック＆自動整形できるようにする - Qiita
[WordPress]PHPCodeSniffer(phpcs)でWPコーディング規約をチェック＆自動整形できるようにするPHPWordPressphpcsphpcbf ちゃんとしようと思い、WordPressコーディング規約をちゃんと学び始めました。 でも自分で間違いを探し出すのはとっても大変だとうなだれてたら、構文エラーをチェックでき、自動整形もしてくれる方法を知ったので忘れないうちにまとめておきます。 野性味のあるまなちゃんも貼っておきます。 かわいい。 WordPressコーディング規約（WordPress Coding Standard）とは WordPressには、コーディング規約がある。 コーディング規約はCSS、HTML、JavaScript、PHPと言語ごとに存在する。 CSS コーディング規約 - WordPress Codex 日本語版 HTML コーディング規約 -
![[WordPress]PHPCodeSniffer(phpcs)でWPコーディング規約をチェック＆自動整形できるようにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/04ead70d62943797ce9460cb808f6aedfeef1f5b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV29yZFByZXNzJTVEUEhQQ29kZVNuaWZmZXIlMjhwaHBjcyUyOSVFMyU4MSVBN1dQJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUU4JUE2JThGJUU3JUI0JTg0JUUzJTgyJTkyJUUzJTgzJTgxJUUzJTgyJUE3JUUzJTgzJTgzJUUzJTgyJUFGJUVGJUJDJTg2JUU4JTg3JUFBJUU1JThCJTk1JUU2JTk1JUI0JUU1JUJEJUEyJUUzJTgxJUE3JUUzJTgxJThEJUUzJTgyJThCJUUzJTgyJTg4JUUzJTgxJTg2JUUzJTgxJUFCJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1lNmFiOWRjMjJhNTgwNzQzOWJmYzc0NzU2ZGY0NTExMQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdXBlci1tYW5hLWNoYW4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFlNDlhODYxNzE0NTQ0ZjcxODg2MDI1NWZlMThlNzVl%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-U09SSUNI%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D9ae2e6bd6d54b73642968e694d0afb50)
npm-scriptで開発環境を作ってみよう | オレインデザイン
最近、Gulpが4.xにバージョンアップしましたね。そのタイミングで開発環境でもGulpをアップデートしてエラーに困っている声を聞いたりします。 僕自身もGulpを使っている環境で4.xにアップデートして、それまで使っていたライブラリからエラーが出て四苦八苦しました。その時、ふと思ったんです。「Gulpに依存してるなー」と。そして、「だったらnpm-scriptの方がいいかも」と思い、npm-scriptで開発環境を作る流れを書いてみようと思います。 タスクの流れ Sassの処理 node-sassでコンパイルプリフィックス付与と圧縮処理ディレクトリを削除して新しくディレクトリを作るSassの処理をまとめて一連のタスクを流して処理 JavaScriptの処理 バンドルする圧縮する一連のタスクを流して処理 画像の処理画像圧縮の処理画像圧縮の一連の流れのタスクを作るファイルを監視するブラウザシ
ローカル環境で使うオレオレ認証局とオレオレ証明書を簡単に作れる mkcert を試した - kakakakakku blog
ローカル環境で使うオレオレ証明書を簡単に「保護された通信」に切り替えることができるコマンドラインツール「mkcert」を試した．先月に GitHub Trending に入っていて知ったのと，自分のローカル環境でオレオレ証明書を使っているときに，Chrome で警告が出ていたので（この接続ではプライバシーが保護されません），そのあたりを全て解決することができた．とにかく便利！ github.com インストール 今回は brew で Mac にインストールした．既に brew に対応している． $ brew install mkcert 最近，リリースタグにバイナリが含まれているので，もし Linux 環境で使う場合は，以下のように取得する． $ wget -O /usr/local/bin/mkcert https://github.com/FiloSottile/mkcert/rele
mkcertで簡単にオレオレ証明書を発行する | RE:ENGINES
はじめに ローカルのwebサーバにhttpsで接続する場合、よくある方法がオレオレ証明書の発行です。 リモート環境ならLet’s Encryptでサクッと終わるのですが、ローカルでも同じくらい簡単な方法は無いかと探したら、mkcertなるツールが見つかりました。 実際に試して数分で完了でき、とても手軽でしたので紹介・共有しようと思います。 前提 masOS High Sierra 10.13.6 Vagrant+CentOS7+nginx ローカルの /etc/hosts に設定したドメインで、ブラウザからhttp接続できるようになっている 概要 ブラウザに警告が出ないように自己証明書を作るのは本来複雑な手順が必要ですが、そのへんを自動でやってくれるのがmkcertです。golang製のツールで、開発環境用の証明書をお手軽に発行する目的で作られました。 It requires no con
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PostCSS 実践 - Qiita
Gulp環境構築にて「AssertionError [ERR_ASSERTION]: Task function must be specified」の原因はgulp v4にバージョンアップした事による仕様変更 - Qiita![Gulp環境構築にて「AssertionError [ERR_ASSERTION]: Task function must be specified」の原因はgulp v4にバージョンアップした事による仕様変更 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/244e5f3bddde3f98c954bff1d64206942423fd41/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9R3VscCVFNyU5MiVCMCVFNSVBMiU4MyVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MSVBQiVFMyU4MSVBNiVFMyU4MCU4Q0Fzc2VydGlvbkVycm9yJTIwJTVCRVJSX0FTU0VSVElPTiU1RCUzQSUyMFRhc2slMjBmdW5jdGlvbiUyMG11c3QlMjBiZSUyMHNwZWNpZmllZCVFMyU4MCU4RCVFMyU4MSVBRSVFNSU4RSU5RiVFNSU5QiVBMCVFMyU4MSVBRmd1bHAlMjB2NCVFMyU4MSVBQiVFMyU4MyU5MCVFMyU4MyVCQyVFMyU4MiVCOCVFMyU4MyVBNyVFMyU4MyVCMyVFMiU4MCVBNiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjY5MWFjYzhkZDUwNDBlNzBlMGU0YTE4ZmMyYTIwNDg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2h1bl9rb21pbmF0byZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTBkNzNkMDM2MWJiYjUwZmRmNDI4N2UxN2FmYjkzYzc%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0b23048194586d03559b8ee5e31895b6)
nodenvでインストールリストとnodeのバージョンをアップデートする – joppot
anyenvをアップグレードしたメモ - Qiita
