この記事は情報が古いので書き直しました。
(追記する方法も考えましたが、大幅に修正することになるので書き直しました。ご了承下さい)
Nuxt.js で Sass/SCSS
を使いたくて開いた方は こちら を読んでみてください。
Sass is 何?
公式によると
CSS with superpowers
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
な CSS 拡張言語です!
ちなみに Sass は Syntactically Awesome StyleSheets
の略らしく、翻訳すると
構造的にイケてるスタイルシート
だそうです!
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
このように ruby
ライクな記述ができ、プログラミング言語っぽく書けることで保守性や可読性が高まるという優れものです!
(もちろん CSS に慣れ親しんだ人向けに、既存の CSS がそのまま使える記法も用意されていますよ!)
Sass をインストール
いろいろと失敗談を記載していますので、結果だけ知りたい方は こちら へどうぞ。
Nuxt.js で使うには?
Nuxt.js
で Sass
を使う場合、次のように記載します。
<style lang="sass">
.red
color: red
</style>
このままでビルドすると
ERROR in ./pages/index.vue
Module not found: Error: Can't resolve 'sass-loader' in '<workspace>\vue-projects\my-project'
sass-loader
が無い、というエラーになってしまいます。
Sass
を利用する場合、プリプロセッサをインストールすることで利用可能になります。
ローダー入れてみよう
> yarn add --dev vue-loader sass-loader
よしよし、再ビルド。
ERROR in multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js
Module not found: Error: Can't resolve 'eslint-loader' in '<workspace>\vue-projects\my-project'
ぐはっ
ローダーを入れてみよう(その2)
> yarn add --dev eslint-loader
(てか eslnt
入ってるよね? もはや迷走)
This dependency was not found:
何がないのか??
起動したアプリの画面を見ると…
NuxtServerError
Cannot find module './index.vue?vue&type=style&index=0&lang=sass&'
なにやら sass
が読み込めていない感じ。
試行錯誤しよう
> yarn add --dev node-sass
> yarn add --dev nuxt-sass-resources
> yarn add --dev style-loader
うおぉぉぉぉぉぉおおおおお
最終的に…
> yarn add --dev vue-loader node-sass sass-loader nuxt-sass-resources-loader style-loader vue-style-loader css-loader
これらをインストールするのと(いらないものもあるかも?)、nuxt.config.js
を
module.exports = {
// 省略
/*
** Build configuration
*/
build: {
// 省略
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && process.isClient) { // <= `ctx.isClient` を `process.isClient` に変更!
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
ctx.isClient
を process.isClient
に変更することでエラーが解消しました。
パト○ッシュ…僕もう疲れたよ…
via. プリプロセッサを使うには? | Nuxt.js 公式
via. NuxtのESLintのエラー対応
Vue-CLI からプロジェクトを作る場合は
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS
Less
Stylus
CSS のプリプロセッサを選択するところで Sass/SCSS
を選択すれば OK です!
記法について
SASS 記法
冒頭に書いたとおり、Sass
を利用した場合
<style lang="sass">
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
</style>
のように書けます。
SCSS 記法
既存の CSS をそのまま使いたい、とか、 CSS の記法に抵抗がない人の場合は SCSS記法 というものもあります。
こちらを使えば、いつもの CSS をそのまま利用することが出来ます!
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
コンパイル結果
上記どちらの記法を利用しても、 次のような CSS にコンパイルされます。
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
便利ですね!
まとめ
導入に割と苦労しましたが、これで Sass
を使うことができるようになりました。
個人的には セレクターをネストして記載できる ことに大きなメリットを感じています。
(なれると普通の CSS 書くときに混乱しますが…)
「スタイルもプログラミング言語っぽく書ければいいのに…」という方は是非ためしてみてください!
それでは素敵な Sass
ライフをー
インデックスページから来た人向け
今回はアプリの目に見える進歩はありませんが、コーダーが快適にコーディングできると良いアプリができるものです!(迷信)
そのうち紹介する(仮) bulma
も、 Sass
と組み合わせて使うことで、より便利になります。
少しずつ機能も増やしていきますので、よかったら他の記事も見てみてください!