9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

nuxtでreset CSSを記述する場所がわからなかった話

Last updated at Posted at 2019-03-25

#reset.css記述したけど反映されない…
コメントいただいたのでこちらの記事の修正版書きました
https://qiita.com/nuxt_suco/items/862edb681a4fd3ddcc23

自分で試行錯誤してて、vueファイルを読み込むからcss単一ファイルのアプローチが
もしかしてダメなのかな、、、(そんなことない気もしてます)
でもどしていいかわからなかったので
Twitterのフォロワーさんにヘルプしてみました
それで勉強になったことを今回は書きます

#ディレクトリー構造を理解したらスッキリした

pagesディレクトリーだけを今までいじってたので、困らなかったのですが
nuxt始めたばかりというのもあり、全くわからず進んでました(すごい良くない)

ディレクトリ構造についてはこちらの公式を見るとわかりやすいです
https://ja.nuxtjs.org/guide/directory-structure/

nuxtのディレクトリー構造

.
├── assets
├── components 
│   └── AppLogo.vue
├── layouts    
│   └── default.vue
├── middleware
├── nuxt.config.js
├── pages     
│   └── index.vue
├── plugins
├── static
│   ├── favicon.ico
│   └── ticket_vending_machine.jpg
└── store      

layoutのdefault.vueが標準で読み込まれてる

<template>
  <div>
    <nuxt/> # (pages配下に書いたやつは</nuxt>に呼び出される)
  </div>
</template>

default.vueにreset.cssの記述をしたらいいのか!

<style>

// # ここまでの元から書かれてるCSSは省略してます

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
}
address{
font-style: normal;
}

</style>

見事反映されました!!!!!!!!!!!!!!!!!!!
今後は、componentsディレクトリーとも仲良くしたいです!
また何か学んだら書きにきます!

今回参考にしたリンク先

[nuxtのディレクトリー構造について]
https://ja.nuxtjs.org/guide/directory-structure/
[nuxtのlayoutディレクトリーについて]
https://ja.nuxtjs.org/guide/views#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88
[reset.css選定の時に参考にしたサイト]
http://shiru-web.com/2017/04/21/01-26/

9
6
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?