1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. 【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。
全然どいてくれない。

今回は gulp を使って、 Sass ファイルから Normalize.css などをインポート(読み込む)する方法を紹介します。

通常、Sass で CSS をインポートしても 外部から CSS を読み込む形(@import url(…)みたいな形)になってしまいます。
今回やりたいのは、 Sass のコンパイル後に CSS のソースも一緒に組み合わせたいわけです。

目次
  1. Normalize.css や sanitize.css をインストール
  2. gulp-postcss と、postcss-import を使う
  3. まとめ

Normalize.css や sanitize.css をインストール

まず、 Normalize.css や sanitize.css をインストールしてみましょう。

Normalize.css

Normalize.css のインストールです。

$ npm install --save normalize.css

sanitize.css

sanitize.css のインストールです。

$ npm install --save sanitize.css

gulp-postcss と、postcss-import を使う

Sass で CSS をインポートする方法として、今回は gulp-postcss と、postcss-import を使おうと思います。

インストール

インストールは以下のコマンドです。

$ npm install --save-dev gulp-postcss postcss-import

gulpfile.js

gulpfile.js は以下のようにします。

'use strict';

const
gulp			= require('gulp'),
sass			= require('gulp-sass'),
postcss		= require("gulp-postcss"),
cssImport		= require("postcss-import");

gulp.task('sass', () => {
	const plugins = [
		cssImport({
			path: [ 'node_modules' ]
		})
	];
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(sass())
	.pipe(postcss(plugins))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

読み込む( @Import )

では、 Sass ファイルから CSS を読み込んでみましょう。
npm でインストールしたものは、node_modules フォルダに追加されていきますが、これを使えばいちいち ../../node_modules/ とか入力する必要もありません。

style.sass

//好きなものをインポートしてください。
@import "normalize.css/normalize.css"
@import "sanitize.css/sanitize.css"

まとめ

Normalize.css や sanitize.css を使いたいと思っても、インポートがうまくできずに困ったという人もいたのではないでしょうか。
今回は Sass から CSS ファイルをインポートする方法を紹介しました。この記事が誰かのお役にたてればと思っております。

スポンサードリンク

関連コンテンツ

オススメ記事

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

Scratchでピアノを 作ってみよう!

小学生から始めるScratch入門。ピアノ鍵盤を作って音を鳴らそう!

小学生から始めるScratch入門です。 前回はじゃんけんゲームを作りました。 今回はピアノの鍵盤を作って、音を鳴らしてみましょう。 プロローグ [serif icon="ar

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

迷路やRPGで使えるマップを作ってみよ!

小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!

小学生からのプログラミング講座(こうざ)、第10弾です。 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力(にゅうりょく)で移動(いどう)するところまで、紹介(しょうかい)

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

Homebrew

Homebrewの使い方。よく使うコマンド一覧と詳しい解説まとめ

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

コメントをどうぞ!

メールアドレスが公開されることはありません。