Nuxt.jsでSassファイルをグローバルに使えるようにする
Nuxt.jsのフレームワークの中においては、単一コンポーネントファイル内であればSassなどが使え、ビルドした時にCSSへとコンパイルされます。ただ、そのVueファイル内でしか使えないので、共通スタイルとしてグローバルに使いたい場合もあるかと思います。そこで今回はNuxt.jsでグローバルにSassを使う方法を備忘録として残しておきたいと思います。
Nuxt.jsでSassを使う場合には「node-sass」と「sass-loader」のモジュールパッケージが必要となります。yarnもしくはnpm経由でローカルのモジュールフォルダにインストールしていきます。
Vueのプロジェクトにおいては、基本的にコンポーネント単位でスタイルも管理することが多いかと思いますが、変数やミックスインなど共通で使えるものも残しておきたいですよね。そんな時にはこのようにグローバルとして使えるSassを用意しておくと便利ですね。 (参考にさせていただいたサイト) Nuxt.js API: css プロパティ
$ cd プロジェクトディレクトリ $ yarn add --dev node-sass sass-loader もしくは $ npm install --save-dev node-sass sass-loaderインストールが終わると「package.json」のdevDependenciesのリストに追加されているのが確認できます。 【package.json】※一部抜粋
{ "devDependencies": { ....... "node-sass": "^4.12.0", "sass-loader": "^7.2.0", ....... } }次に、プロジェクトルート直下のassetsディレクトリ配下に使いたいSassファイルを設置していきます。もちろんアンダーバーをつけてパーシャルファイルとし、Sassファイルを分割することも可能です。
/ ┣ assets ┗ scss ┣ common.scss ┣ _base.scss ┗ _layout.scssそして、プロジェクト直下にある「nuxt.config.js」にあるCSSプロパティの値に対象のSassファイルをルートパスで指定します。@を入れることでプロジェクトルートを基準としたルートパスで指定できます。 【nuxt.config.js】※一部抜粋
export default { css: [ '@/assets/scss/common.scss' ] }デベロッパーツールで確認してみると、Sassファイルがコンパイルされていることが確認できます。

Vueのプロジェクトにおいては、基本的にコンポーネント単位でスタイルも管理することが多いかと思いますが、変数やミックスインなど共通で使えるものも残しておきたいですよね。そんな時にはこのようにグローバルとして使えるSassを用意しておくと便利ですね。 (参考にさせていただいたサイト) Nuxt.js API: css プロパティ
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories