a minute ago

Nuxt.jsにscss, sassを導入

Table of Contents

ライブラリインストール

sassを読み込むためのライブラリをインストールする。

npm install --save-dev sass sass-loader@10 fibers

これだけでvueファイル内でscssの使用が可能

<style scoped lang="scss">
button {
    background-color: #fff;
}
</style>

グローバルで読み込むscssはnuxt.config.jsで定義する

export default {
  css: ['~/assets/scss/variable']
}

一例として以下の変数定義用ファイルを作成

/assets/scss/variable.scss

$primary: #1162ec;

すると以下のようにvueファイルの中でも変数が使える

<style scoped lang="scss">
@import "assets/scss/variable";
button {
    background-color: $primary;
}
</style>

Table of Contents