web-dev-qa-db-ja.com

VuejsでグローバルCSSを使用する最良の方法

Vuejsですべてのコンポーネントのグローバルcssファイルを作成する最良の方法は何ですか？ （背景色、ボタンスタイリングなどのデフォルトのCSS）

  • index.htmlにcssファイルをインポートします
  • メインコンポーネントで@importを行う
  • すべてのcssをメインコンポーネントに配置します（ただし、それは巨大なファイルになります）
cssimportvue.js
31
Jordy

Index.htmlにcssをインポートしますが、webpackを使用している場合は、メインのjs configにスタイルシートをインポートするだけで、すべてのコンポーネントがcssを取得します。

49
highFlyingSmurfs

assets folderに新しいファイルを作成するのが最良の方法であることがわかりました。global.cssただし、任意の名前を付けることができます。次に、このファイルをインポートしますglobal.cssファイルのmain.js。

注：このアプローチを使用すると、global.cssが非常に大きくなっていると思われる場合は複数のファイルを作成し、main.jsにすべてのファイルをインポートすることもできます。

@\assets\global.css

/* move the buttons to the right */
.buttons-align-right {
  justify-content: flex-end;
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routes'

Vue.config.productionTip = false

// Importing the global css file
import "@/assets/global.css"

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
6
Coder Absolute

次のようなこともできます： https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/ =

私のフォルダはほとんど次のように構成されています：

 - src
   - assets
     - _global.scss
     - _colors.scss
     - _fonts.scss
     - _paragraphs
     - index.scss // <-- import all other scss files.

これは通常のCSSでも機能します。

2
PeeJee