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

スポンサードリンク

関連コンテンツ

オススメ記事

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

WordPress

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

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

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

今月の残り日数を計算するべ!

小学生からのJavaScript入門。今月の残り日数を計算してみよう!

小学生からのJavaScript入門、第2弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割った

zsh

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

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

FC2 blog customize

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

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

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

プログラミングのクラスってなぁに?

小学生からのJavaScript。クラスの概念をしっかりと理解しよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「ク

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

コメントをどうぞ!

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