[B! SASS] satoshieのブックマーク

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.

satoshie 2020/12/27

リンク

Webpackを使ってSassをビルドする - Qiita

var path = require('path'), ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = [{ context: path.join(__dirname, 'src/css'), entry: { style: './style.scss' }, output: { path: path.join(__dirname, 'public/css'), filename: '[name].css' }, module: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url&minimize&sourceMap!sass-loader'

satoshie 2020/12/27

リンク

これからはcssはSassで書こう。 - Qiita

Sassってなんだろう。・Sass「Syntactically Awesome StyleSheet」 Syntactically　＝　構文的に Awesome　＝　イケてる StyleSheet　＝　スタイルシートとどのつまり、すごいCSSということでしょうか。ロゴもかっこいい。詳しく調べてみた・CSSを拡張したメタ言語メタ言語とは「ある言語について何らかの記述をするための言語」のこと。つまりSassの場合は「CSSに対して機能を拡張した言語」ということになります。 CSSをより効率的に書けるようにした言語ということになります。・Sass はプログラムっぽく CSS を書くプログラムっぽく書くことでコーディング効率やソースコードの保守性が上がる。 Sassは、関数や変数の処理を行うために「プリプロセッサー」と呼ばれたりもするみたいです。 Sassには書き方が2種類ある！

satoshie 2020/12/27

リンク

Sass(SCSS)のmixin, extendなどまとめ - Qiita

Sass(SCSS)のややこしそうな機能まとめ。変数共通な色や数値などを定義しておける。他に、文字列や真偽なども定義可能。

satoshie 2020/10/15

リンク

Sassで@mixinを作る時に知っておきたい基礎知識 - Qiita

はじめに Sassの@mixinはメンテナブルなCSS設計にも役立つ強力な機能です。一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。そこで@mixinを自作するにあたって、知っておきたい（おきたかった）基本知識をまとめました。何かの参考にでもなれば幸いです。前提条件ソースコードは.scss形式で記述しています Sass 3.4.4で動作を確認しています使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル（セレクタ・class）に追加する形で装飾を調整するclassのこと目次 @mixinのおさらい基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる制御用の引数を用意してみる引数に配列（リスト）を使って

satoshie 2020/10/15

リンク

Nodeのバージョンを上げたらnode-sassがエラーを吐いたのでコードリーディングしてみた | DevelopersIO

Node Sass could not find a binding for your current environmentというエラーメッセージをきっかけにnode-sassのソースコードを少し追ってみました。起きた事象フロントエンドのビルド環境としてNode v8で動いていたプロジェクトをNode v10にアップデートしました。その結果、次のような Node Sass could not find a binding for your current environment というエラーメッセージを吐いて落ちました。どうやら使用していたモジュールのnode-sassでエラーが起きたようです。 Error: Missing binding /path/to/project/node_modules/node-sass/vendor/darwin-x64-64/binding.no

satoshie 2020/08/07

リンク

[Laravel 5.6] Laravel 開発で Javascript を書きたいとき（Laravel Mix の使い方とか） - Qiita

[Laravel 5.6] Laravel 開発で Javascript を書きたいとき（Laravel Mix の使い方とか）JavaScriptnpm初心者Laravel laravelMix Laravel 開発で Javascript を書きたいけど... Laravel 初心者としては Javasctipt を書きたいと思ったとき、どこにどうやって書いて管理していけばいいかわからないですよね。。（自分だけかもしれませんが。。）決まった方法はないみたいですが、会社の先輩からのアドバイスなどを基に自分なりにまとめてみました。おおまかな流れ npm をインストール resources/assets/js 内に js ファイルを作成 resources/assets/js/app.js を編集 npm run dev コマンドで js ファイルをコンパイル npm のインストール La

satoshie 2019/11/06

リンク

はてなブックマーク

タグ

関連タグで絞り込む (12)

SASSに関するsatoshieのブックマーク (7)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス