[フロントエンド] ParcelでSASSからNodeパッケージをインポートする

  • このエントリーをはてなブックマークに追加

最近話題のモジュールバンドラであるParcelを使ってみてます。
そこで.scssファイルから、Nodeモジュールのパッケージに入ってる.scssファイルを読み込もうとしたんですが、そのままではnode_modulesディレクトリにパスが通ってないらしく、読み込めませんでした。
それについての対処法。

// example.scss
@import "compass-mixins/lib/compass";

こちらの記事を参考にしました。最後の方に解決方法が書いてあります。
Importing CSS from node_modules · Issue #39 · parcel-bundler/parcel

プロジェクトルートに.sassrcファイルを作って以下のようにJSONで設定を書くのが普通ですが、これだとパスが通らないらしくnot foundになってしまいます。

// .sassrc
{
  "includePaths": [
    "node_modules"
  ]
}

そこで、拡張子を.jsにすることでpathライブラリが使えるようになるので絶対パスを指定できるようにします。
改めて下記のような感じにnode_modulesへパスが通るように修正すればよしです。

// .sassrc.js
const path = require('path');
const CWD = process.cwd();

module.exports = {
    includePaths: [
        path.resolve(CWD, 'node_modules'),
    ],
};
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。




コメントを残す