vue项目设置全局css样式

要设置全局的 CSS 样式，可以在 Vue 项目的 `src/assets` 目录下创建一个 `styles.css` 文件，并在 `main.js` 中引入该文件。

1. 在 `src/assets` 目录下创建一个 `styles.css` 文件。

2. 在 `main.js` 文件中引入该文件。

import Vue from 'vue';
import App from './App.vue';
import './assets/styles.css';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

3. 然后在 `styles.css` 文件中编写全局 CSS 样式。

/* 设置全局的字体 */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 设置全局的背景颜色 */
html,
body {
  background-color: #f7f7f7;
}

/* 设置全局的链接样式 */
a {
  color: #007bff;
  text-decoration: none;
}

现在，这些全局样式将应用于整个 Vue 项目。

相关问题

vue3项目全局样式怎么设置

1. 创建全局样式文件

在项目中创建一个全局样式文件，例如：global.css。

2. 引入全局样式文件

在 main.js 文件中引入全局样式文件：

import './global.css';

3. 配置 webpack

如果使用 webpack 打包项目，可以在 webpack 配置文件中添加一个全局样式文件的配置：

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

这样在项目中就可以直接使用全局样式了。

Vue2 项目的全局样式表中在那边

在 Vue2 项目中，你可以在 `main.js` 文件中引入全局样式表，例如：

import Vue from 'vue'
import App from './App.vue'
import './assets/css/global.css'

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

在上面的例子中，`global.css` 文件被引入到了 `main.js` 文件中，并且可以被整个应用程序使用。你也可以在组件中使用 `style` 标签或 `scoped` 属性来定义局部样式。