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 ファイルをインポートする方法を紹介しました。この記事が誰かのお役にたてればと思っております。

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

Swift

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

JavaScriptを使ってゲームを作成するのが好きです。@It_is_Rです。 JavaScriptはWebページに動きを出すのによく使われ、ブラウザゲームなども作ることができます。 今回は

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

コメントをどうぞ!

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