Question

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

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

Answer 1

在index.html中导入css，但如果您使用的是webpack，则只需在主js配置中导入样式表，所有组件都将获得css。

Answer 2

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

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

Answer 3

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

Answer 4

我发现最好的方法是在我创建为global.css的 assets文件夹中创建一个新文件，但是您可以选择任何名称。然后，将此文件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')

Answer 5

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

方法一

利用vue.config.js配置，less config也可以换成sass：

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

方法 2

在你的 .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

Answer 6

在你的根目录中创建一个 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";`
        }
      }
    }
  };

在Vuejs拥有全球css的最佳方式

6 个答案:

方法一

方法 2