在 Vuejs 中拥有全局 CSS 的最佳方式

Question

在 Vuejs 中为所有组件创建一个全局 css 文件的最佳方法是什么？ （默认 CSS，如背景颜色、按钮样式等）

• 在 index.html 中导入一个 css 文件
• 在主组件中做 @import
• 将所有 css 放在主要组件中（但这将是一个巨大的文件）

原文由 Jordy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你的 index.html 中导入 css，但如果你使用 webpack，你可以在你的主 js 配置中导入你的样式表，你所有的组件都会得到 css。

正如下面的评论所建议的，如果使用 webpack 将其添加到 main.js 有效：

 import './assets/css/main.css';

原文由 highFlyingSmurfs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我发现最好的方法是在 资产文件夹 中创建一个新文件，我创建为 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;
}

---

主程序

---

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')

原文由 Coder Absolute 发布，翻译遵循 CC BY-SA 4.0 许可协议