もっとコーディングのスピードを上げたい、cssのコロンやセミコロン、{}、がめんどくさいなど思ったことはありませんか。

stylusを入れてなれて来れば、コーディングのスピードは1.5倍早くなると思います。

とう言うことで今回は、nuxtでstylusを使う方法を紹介します。

環境とバージョンについて

• mac OS 11.2.3
• エディタ　VSCode
• node v14.8.0
  
  

  Node.js

  Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

  

  nodejs.org
• npm 6.14.7
  
  

  npm

  

  www.npmjs.com

nuxtにstylusを入れる方法

まずはnpmを使ってインストールを行います。

npm i stylus stylus-loader

インストールは上記のコマンドだけでOKです！

インストール後はpackage.jsonを確認してください。

下記の項目が追加されていればインストールは成功です。

"devDependencies": {
	"stylus": "^0.54.8",
  "stylus-loader": "^4.3.0"
}

あとは.vueファイルに下記の記載をすればstylusの記述ができるようになります。

複数のstylusファイルを扱う方法

共通のスタイルなどを書くときに毎回vueファイルに同じ記述をするのはよくないし、resetcss なんかも読み込みたいなどあると思います。

共通のファイルを用意しどこからでも呼び出せるようにします。

npm i --save-dev @nuxtjs/style-resources

インストールが成功するとpackage.jsonに下記の記述が追記されます。

"devDependencies": {
	"@nuxtjs/style-resources": "^1.2.1",
}

次にnuxt.config.jsを修正していきます。

書きを追加します。

// Global CSS: https://go.nuxtjs.dev/config-css
  css: ['./assets/stylus/xxx.styl'],

  styleResources: {
    stylus: './assets/stylus/xxx.styl',
  },

あとはassetsの中に共通のファイルを読み込めばOKです。

「xxx」の部分は任意のファイル名にしてください。