ダッシュで奪取

自分用のメモ

【Vue.js】scssファイルを使いたい

やりたいこと

  • 色設定等を共通で使えるようにしたい
環境
  • Vue.js 2.6.11

  • Vue CLI 4.4.1

目次

  1. 構成
  2. 各ファイルの記述
  3. 参考URL

1. 構成

  • こんな感じにします
src
├── assets
│   └── scss
│     ├── main.scss
│     └── _variables.scss
│

2. 各ファイルの記述

src/assets/scss/main.scss
  • 個別に import しなくても良いように、まとめて読み込むためのファイル
@charset "UTF-8";
@import "variables";
scr/assets/scss/_variables.scss
  • 色設定を記述するファイル

    • 他、必要に応じてファイルを作ったら main.scss で import してあげる
@charset "UTF-8";
$mainColor: #ff99cc;
src/main.js
  • ファイルごとにいちいち import なんとか〜 しなくても良いように記述
require('@/assets/scss/main.scss');
vue.config.js
  • vue-loader に読み込んでもらう
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/scss/main.scss";`
      }
    }
  },
}
scr/App.vue
  • こんな感じで使えるようになる
<template>
  <div id="app">
    <span class="hoge">hoge</span>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="scss" scoped>
  .hoge {
    color: $mainColor;
  }
</style>

3. 参考URL