# Vue CLIで共通のSCSSファイルを読み込む方法

URL: https://webrandum.net/vue-cli-common-scss/
公開日: 2020-09-14
更新日: 2020-09-14
カテゴリー: コーディング
タグ: Vue CLI, Vue.js
出典: Webrandum（著者: サイトウ マサカズ）

リセットCSSフレームワークなどを使用したい場合は、yarnやnpmでインストールになりますが、今回は自分で`.scss`ファイルを作成して、コンパイルして読み込ませる方法をまとめておきます（本来はVue.jsをせっかく使うなら、共通のCSSは使わない方がいいと言われていますが…）。

前提として、[Vue CLIのセットアップ時](https://webrandum.net/vue-cli/)に「CSS Pre-processors」で「Sass/SCSS」を選択している必要があります。

[Vue CLIでVue.jsの開発環境をセットアップするまでの流れ](https://webrandum.net/vue-cli)

## SCSSファイルの作成

SCSSファイルはどこに作成してもいいのですが、とりあえず下記のパスにフォルダとファイルを作成しておきます。

```
/src/assets/scss/style.scss
```

作成ができたら読み込みをします。

## 共通のSCSSを読み込む方法

Vue CLIで共通のSCSSを読み込む方法は2つありますが、基本は`main.js`に記述を追加する方法のほうがラクそうです。

### JavaScriptで読み込む方法

`/src/main.js`に下記の1行を付け加えるだけです。

基本的に共通のSCSSを読み込みたい場合は、こちらの方法を使った方がよさそうです（記述も1行で済みます）。

```
require('@/src/assets/scss/style.scss')
```

### Vueコンポーネントで読み込む方法

`vue.config.js`に下記の記述を追加するだけです。

```
module.exports = {
  ## ↑他の設定省略
  css: {
    loaderOptions: {
      sass: {
        data: `@import "./src/assets/scss/style.scss";`
      }
    },
  },
  ## ↓他の設定省略
}
```

`module.exports`は最初から記述されているので、何も設定していない場合は`css:`から記述をすればOKです。