Nuxtにdart sassを入れた時の備忘録

webあれこれ

sassを使用することでcssよりも簡略化したコードかけ、可読性も良くなる。
変数や関数化して使用できるメリットがあります。

dart sassのインストール

$npm i sass

nuxt.config.tsにsassを読み込むコードを入れる。

//module.exports内に

css: ['@/assets/scss/style.scss'],

Live sassからdart sassへの変化

ざっくりいうと@importは使えなくなる・・・

@importを改良して新たに取り入れられた機能が@useと@forwardであり、@importでは階層がどこなのか分かりにくかった経緯がある。

@use・・・このファイルを使用するよー
@forward・・・このファイルを継承するよー

・それぞれディレクトリを用意し、_index.scssを用意する。_index.scssは同じ階層にあるファイルと読み込む用。

・@importから@useへと変更。

・globalの中にあるファイルは、他のファイルから参照されるようにするため、@forwardを使って読み込む。

階層構造はこちらを参考にしました。
https://yumegori.com/dart-sass-method

どのコンポーネントからもsassの変数を使えるようにするには?

せっかくなので、変数や関数をどのコンポーネントでも呼び出せるようにしたい!

$npm i @nuxtjs/style-resources
@nuxtjs/style-resources
] ] ] ]. Latest version: 1.2.1, last published: a year ago. Start using @nuxtjs/style-resources in your project by running `npm i @nuxtjs/style-resources`. Ther...

↓普通にやってみると変数が使えず、調べるとissuに上がっていた・・・
dart sassの@useが対応していないっぽい・・・・汗
https://github.com/nuxt-community/style-resources-module/issues/143

assetsのsassフォルダにvariablesなどの変数や関数をimportしたファイルと用意する。
名前は適当にglobal-function.scss。issueだとapp.sassとなっていた。なんでもよい。

@import './global/variables';
@import './global/function';
@import './global/mixins';

@useが使用できないので@importで読み込む

  styleResources: {
    scss: ['~/assets/scss/global-function.scss'],
    hoistUseStatements: true
  },

styleResourcesで使用するよーとnuxt.config.tsへ記述する。

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