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 のソースも一緒に組み合わせたいわけです。

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 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

enchant.js

HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。

以前、Flashを使って、横スクロールアクションゲームを作ろうとしていたのですが、実はAndroid4.xではFlashPlayerがサポートされておらず、最近のAndroidではFlashPlaye

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

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

普段から猫に遊ばれている@It_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

これから作る WordPress のテーマをローカルサイトに適用させる。

WordPress と AliExpress って混乱しますよね。@It_is_Rです。せーへんわ。 WordPress テーマ自作シリーズ、第三回目です。 前回までで、ローカルで Wor

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

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

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

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja