フロントエンド

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'),
    ],
};
スポンサーリンク
記事を書いた人

システムえんじにゃー🐈
趣味はエレキギター、自転車など。作曲したい。
World of Warshipsやってます。
記事に関する質問はお気軽にどうぞ。

surface0 (さーふぇす)をフォローする

コメント

タイトルとURLをコピーしました