NuxtにCSSをお作法に則りながら導入

5955 ワード
CSS nuxt.js CTO CSS テキストリンク

前提

ホームページ制作はCSSゲーであると感じたため、CSSをNuxtに導入しようと思った。

そのとき、結構忘れそうな内容だったため、メモる。

また、ここで初めてSCSSなる非常に革命的なものに出会ったため、その導入方法等も記載する。

SCSS導入方法

なんとNuxt.jsはSCSSをサポートしている

npm install sass sass-loader fibers

その後、nuxt.config.jsにて以下を書き込む

nuxt.config.js
const Sass = require('sass')
const Fiber = require('fibers')

export default {
  // build.loaders のセクションに scss オプションを追加
  build: {
    loaders: {
      scss: {
        implementation: Sass,
        sassOptions: {
          fiber: Fiber
        }
      }
    },
    /*
     ** You can extend webpack config here
     */
    extend (config, ctx) {
    }
  }
}

これでOK！ばり簡単

普遍的なCSSの場合

ディレクトリ構造

assets/styles(またはcss)/common.css

nuxt.config.js

nuxt.config.jsのcss:[]内に以下を記述する

nuxt.config.js
export default {
  // ...
  /*
  ** Global CSS
  */
  css: [
    "~assets/styles/common.css"
  ],
  // ...
}

これで適用されるはず

SCSSで書きたいとき

assets/scss/common.scssを作成

nuxt.config.jsに記入したパスもこれに変更することを忘れてはいけない

個別のCSSの場合

Vueファイルの<style>に直接書き込むだけ。

めっちゃ便利

ただし、ページ遷移後にもサイト全体に適用されるため、（Nuxtぽい笑）

<style>を<style scoped>と表記すればいいようだ。

SCSSの場合

同様に

pages/index.vue
<style lang="scss" scoped>
  $color: red;
  p{
    color: $color;
  }
</style>

とすると良いようだ。

またここがすごいところで

SCSSのimport構文でassets/scss/に作成したSCSSファイルからimportすることもできる

pages/index.vue
<style lang="scss" scoped>
  @import "~assets/scss/mixins.scss"
  p{
    color: red;
  }
</style>

mixinを共有できるのは非常によき

まとめ

意外と簡単だが～とか忘れそうなので気をつけます。

参考：https://lessons.lec.cafe/nuxtjs_website/05.scss.html#%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%81%AAcss%E3%81%AE%E5%88%A9%E7%94%A8