Nuxt.jsにおいて SCSSを使う方法

これだけ。npm最高。

ターミナル

npm install node-sass sass-loader style-loader

コンポーネント

<template>
   <div>
    <h1>Hello World</h1>
  </div>
</template>


<style scoped lang="scss">

div {
  h1 {
    background: blue;
    color: white;
  }
}

</style>

各ライブラリの概要

node-sass

LibSass(C製のsassコンパイラ)をNode.jsで使えるようにしたライブラリ。

ターミナルでも使えるよ

qiita.com

インストール

npm install -g node-sass

コンパイル

node-sass style.scss style.css
node-sass style.scss style.css -w # -w で自動コンパイル(watch)

ソースコード読んだけど挫折した、いつか読みたいコンパイラ

sass-loader

SassのLoaderだよ。

Loaderってなんじゃ

Loaders can transform files from a different language (like TypeScript) to JavaScript, Loaderは異なる言語をJavascriptに変換します(そんでもってJavaScriptの中で使えるようにします)

style-loader

JavaScriptのコード中でstylesheetをrequire出来るようになります。 ※css-loaderとの組み合わせ推奨。

↓こんなんができる。

require('./style.css')

style-loaderについては以下が非常によくまとまっていた。一読の価値あり。