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'),
    ],
};
スポンサーリンク
管理人

システムえんじにゃー🐈
趣味はエレキギターなど。作曲したい。
WoWs/プリコネ
記事に関する質問はお気軽にどうぞ。

たかおファン(surface0)をフォローする
たかおファン(surface0)をフォローする
Rain or Shine

コメント

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