LoginSignup
95
91

More than 3 years have passed since last update.

Sassの@importでreset.cssやnormalize.cssを読み込む

Last updated at Posted at 2016-11-21

Sass の @import によるインライン展開は .css 拡張子に対応していないので、.css ファイルしか用意されてない HTML5-Resetnormalize.csssanitize.css などはそのままではインポートできません。
.css ファイルを指定すると CSS の @import url(...) になってしまいます。

.scss バージョンを公開している人もいますができれば公式のものを使いたいし、自分でリネームしてリポジトリに置くというのも避けたいところです。

これらの条件をクリアするために、私は Bower でインストールしたあと gulp で .scss にリネームしていたのですが、node-sass-package-importer を使うとそんな手間もいらず簡単にインポートすることができたので紹介します。

インストール

node-sass-package-importer のほか、使いたい CSS パッケージをインストールします。

$ npm i -D node-sass-package-importer
$ npm i -S html5-reset normalize.css

Sassのオプションに指定する

node-sass-package-importer を Sass の importer オプションに指定します。importer は @import の処理をフックして独自処理を行うプラグイン機構です。
基本的な使い方は node-sass-package-importer のサイトに書いてあるので、ここでは gulp タスクとして組み込む方法を書いておきます。

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var packageImporter = require('node-sass-package-importer');

gulp.task('build:sass', function() {
  return gulp.src('path/to/sass/**/*.scss')
    .pipe(sass({
      importer: packageImporter({
        extensions: ['.scss', '.css']
      })
    }))
    .pipe(gulp.dest('path/to/css/'));
});

CSSファイルをimportする

基本的にはパッケージ名の頭に ~ をつけて import するだけです。

@import "~normalize.css";
@import "~html5-reset";

node-sass-package-importer はインポートするパッケージの package.json を見て取り込むファイルを判断しています。具体的には以下のいずれかのキーに設定された CSS/Sass ファイルを読み込みます。sass scss style css main.sass main.scss main.style main.css main

この設定がない場合やそれ以外のファイルをインポートしたいときは、パッケージ名に続けてファイルパスを指定します。例えば、Bootstrap の reboot.css をインポートするには以下のように指定します。

@import "~bootstrap/dist/css/bootstrap-reboot";
95
91
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
95
91