Help us understand the problem. What is going on with this article?

Sass+globパターンの環境構築とコンパイルの覚書

More than 1 year has passed since last update.

これやっといてーと修正投げられたあるウェブサイトのスタイルはSassで書かれていました。基本Javaとかでサーバーサイドの私ですが、せっかくなのでSassの環境構築とコンパイル方法を学びました。この記事はその覚書で、Sassの詳細な利用方法や記法などは記載していません。

環境

  • Node.js v9.4.0
  • MacBook Air (13-inch, Mid 2012)
  • macOS Sierra 10.12.6

Sassとglob

普通にコンパイルするとエラーになるので調べると、@import 'layout/**/*.scss';のようにglobパターンで複数のscssファイルがインポートがされていたためでした。Sassのデフォルトではサポートされていないようで、glob用のプラグインを利用する必要があるとのこと。

globについてはこちらで教えていただきました。
https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34

メインのscssはこのような内容

style.scss
@charset 'utf-8';

// Utils
//-----------------------------------------------------------
@import 'utils/var';
@import 'utils/fonts';
@import 'utils/mixin';

// Base
//-----------------------------------------------------------
@import 'base/reset';
@import 'base/default';

// Layout
//-----------------------------------------------------------
@import 'layout/**/*.scss';

// Page style
//-----------------------------------------------------------
@import 'pages/**/*.scss';

環境構築

以上を踏まえて、参考記事にもあるNode.jsの「node-sass-globbing」というプラグインでglobパターンが使えるように、そしてコンパイラは必須の「node-sass」を利用します。

npmの初期設定

npm init -y

node-sassとnode-sass-globbingのインストール

npm install node-sass --save
npm install node-sass-globbing --save

コンパイル

作成されたpackage.jsonにコンパイルするためのscriptを追加します。(少し省略)
参考記事のコメントに書かれている通り、--importerオプションでnode_modules/node-sass-globbing/index.jsを指定するのがミソ。

package.json
{
  "name": "scss",
  "version": "1.0.0",
  "scripts": {
    "build": "node-sass --importer node_modules/node-sass-globbing/index.js -o dist style.scss"
  },
  "dependencies": {
    "node-sass": "^4.11.0",
    "node-sass-globbing": "0.0.23"
  }
}

コンパイル実行

npm run build

コンパイルに成功すると「dist」というディレクトリにcssが作成されます。
あとは、node-sassのオプションで
圧縮したり--output-style compressed
ソースマップを作成したり--source-map true

最後に

node-sassは結構高速な印象でした。Sass素敵。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした