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

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

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

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

---

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

---

在 App.vue 中，您可以添加一个 style 属性来声明您的 CSS 文件：

<style>
  @import './assets/css/global.css';
</style>

---

您还可以执行以下操作：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。

---

据我所知，有两种方法可以实现这一目标。

方法一

利用 vue.config.js 配置，less config 也可以用 sass 代替：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        additionalData: `@import '@/style/common.less';`
      }
    }
  }
}

方法二

在您的 .vue 文件中，使您的样式如下所示：

<style lang="less">
@import (reference) "../../style/variables.less";
#app {
  background: @bgColor;
}
</style>

注意：(reference) 标志用于使 variables.less 中定义的变量生效。如果您没有变量，@import "../../style/variables.less"; 就足够了。

供您参考，您还可以查看此链接：

https://github.com/tjcchen/vue-practice/tree/master/multipage-app

---

在您的资产文件夹中创建一个新的 css 文件，例如： global.css import "global.css" to main.js

    import '@/assets/main.css';

---

在根目录中创建一个 vue.config.js 文件 在 src 文件夹中创建一个样式文件夹，您可以在此处创建全局样式文件，例如 base.scss 以使用 scss 安装两个依赖项

npm install node-loader sass-loader

在您的 vue.config.js 中粘贴下面的代码

module.exports = {
    css: {
      loaderOptions: {
        sass: {
            additionalData: `@import "@/styles/base.scss";`
        }
      }
    }
  };

---