グローバルなCSSをVue CLIで使う

Vue CLIでグローバルで使えるCSSを設定する

環境

• @vue/cli 4.0.4
• sass-loader 8.0.0

簡潔に

グローバルでというのはどの.vueファイルの<style></style>からでもという意味。

package.jsonのvueキーに以下を設定する。今回はSCSSを使用しているので、このようになる。

{
  "...": "..."
  "vue": {
    "...": "...",
    "css": {
      "loaderOptions": {
        "scss": {
          "prependData": "$test-color: #F00;"
        }
      }
    }
  },
  "...": "..."
}

vue.config.jsに記述でもいい。公式はそれで書いてあった。 Working with CSS | Vue CLI

本当は、prependDataに.scssファイルでも置いておく。次のような感じ。

{
  "...": "..."
  "vue": {
    "...": "...",
    "css": {
      "loaderOptions": {
        "scss": {
          "prependData": "@import \"~@/variables.scss\";"
        }
      }
    }
  },
  "...": "..."
}

利点

このようにすることで、.vueファイルの<style></style>の先頭にわざわざインポート文を書く必要がなくなる。 1カ所に集まるので保守性がいい気がする。 しかし、jsonだと、1行にまとめるしかないので、複数をインポートするときはvue.config.jsを使ったほうがいいだろう。こうなる:

module.exports = {
  somekey: "...",
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/variables.scss"; \
                      @import "~@/animations.scss";`
      }
    }
  }
}

バッククォートも使えるし、バックスラッシュも使える。vue.config.jsで分離しておくのが吉だと思う。