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

スポンサードリンク

関連コンテンツ

オススメ記事

Homebrew

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

人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いてみようと思います。Homebrewをインストールすると、ターミナルから便利なコマンド

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

java

Javaでじゃんけんゲームを作ろう。サンプルコードあり!

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされており、Java

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

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

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方

みなさんこんにちは。今日も楽しくプログラミングを学んでいきましょう! これまでの講座《こうざ》で、JavaScript《ジャバスクリプト》によるゲーム開発《かいはつ》の方法が、なんとなくでも分

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

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

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

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です