vueのプロジェクト全体にCSSを適応させる
やりたいこと
- vueのプロジェクト全体にCSSを適応
環境
- vue cliを使用して作成したプロジェクトを使用
- プロジェクト全体に適応させるCSSはHTML5 Reset Stylesheetを使用
$ vue create -V @vue/cli 4.1.2
やること
App.vueでcssファイルを
import
App.vueにimport
文を追加
// App.vue <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template> <style lang="scss"> + @import url('./css/reset.css'); #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } } } </style>
結果
CSS適応前
CSS適応後