[Vue.js][Vue3][Vue-Cli] @import のファイル/フォルダ指定で ../node_modules/・・・ と書かずに ~(tilde/チルダ) で済ますお話

2021/01/30

まとめ

@import "../node_modules/folder/file.sass";

のように書かなくても

@import "~folder/file.sass";

と書けば sass-loader がよしなに解決してくれる。

背景

Vue CLI でサイトを作っていたのですが、機能をだいだい実装し終わって、じゃデザインに…と思ったところで、さすがにゼロから自分で css 書くのダル過ぎる…というわけで、 Bulma を導入することに。

後から適用するには…？と調べていて、参考にさせて頂いた記事がこちら。

【Vue.js】Vue CLI 3 + BulmaでSPA環境を5分でつくる！ | kawadeblog

Webシステムをさっくり作る場合、Vue.js便利ですよね。 昨年、vue-cli がバージョン3に上がり、JSフレ ...

 https://kawadev.net/vuejs_bulma/

npm install bulma

として bluma をインストールしたら、元から記述されている

<style lang="scss">

の次に

@import "../node_modules/bulma/bulma.sass";

と追記。

うーむ、ここで ../node_modules/ って相対指定するのなんかヤダなぁ…と思って調べた結果、

sass-loader - npm

Sass loader for webpack. Latest version: 16.0.2, last published: 4 days ago. Start using sass-lo ...

 https://www.npmjs.com/package/sass-loader

Resolving import at-rules

Webpack provides an advanced mechanism to resolve files.

The sass-loader uses Sass’s custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell Webpack that this is not a relative import:

@import"~bootstrap";

It’s important to only prepend it with ~, because ~/ resolves to the home directory. Webpack needs to distinguish between bootstrap and ~bootstrap because CSS and Sass files have no special syntax for importing relative files. Writing @import "style.scss" is the same as @import "./style.scss";

と言うことだそうで、

@import "~bulma/bulma.sass";

と指定してやれば sass-loader が解決してくれるのでした。（説明にあるように、先頭につけるのは ~ のみであって、 ~/ ってやってしまうとハマります。）