Nuxt.js｜SCSS

  • 投稿日
  • 著者 kngsmym
  • カテゴリー Nuxt.js

Vueファイル内でSCSSを使えるように

sass-loaderをインストール

$ npm install sass-loader node-sass --save-dev

これで.vueファイル内に直接scssで書けるぽいです。

書くときはstyleタグにアトリビュートで言語を追加して、その中にscssで記述する。

<style lang="scss">
body {
  background-color: lightgray;
}
</style>

共通のSCSSファイル

scssファイルの配置

assets下にsassフォルダを作成して、scssファイルを格納。

[assets]
- [sass]
 - app.scss

特に指定のフォルダ構成があるわけではなく任意の構成、名称でOK。
これを設定ファイルから参照させると、コンパイルした上でソースに埋め込んでくれるぽい。
従来の、sassの書き出し設定で静的cssの書き出し場所を指定してHTMLからはそのパスを参照する、とかの手順がいらない。

@importとかも全然いける

こういう構成で

[assets]
- [sass]
 - app.scss
 - common.scss

app.scssにこう書けばOK。

@import "~assets/sass/common.scss"

設定ファイルへの記述

nuxt.config.jsに、scssのパスを指定する。

これだけで完了。なにこれ楽ちん。

// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
  { src: '~/assets/sass/app.scss', lang: 'scss' },
],

Nuxt Vue