vue2中写全局的css

在Vue.js 2.x版本中，如果你想编写全局样式并且让它们在整个应用中生效，可以采用以下几种方式：

1. **使用`main.js`**：最常见的方式是在`src`目录下的`main.js`文件中导入CSS文件。这使得全局注册的组件和整个应用都能访问这些样式。

import './global.css';

2. **Vue.extend选项**：如果你正在使用`Vue.extend`创建自定义组件，可以在`options`对象的`extends`属性中设置`style`属性，将CSS内容直接写入。

const MyComponent = Vue.extend({
  template: '<div></div>',
  style: `
    /* 全局样式 */
  `,
});

3. **利用`@vue/cli-service`生成的项目结构**：对于基于`@vue/cli`搭建的项目，全局CSS通常会放在`src/assets/css/global.css`这样的路径下，并在`vue.config.js`中配置`css`选项，如`extract: false`，以防止提取到单独的CSS文件。

module.exports = {
  css: {
    extract: false, // 或者注释掉这一行，这样所有CSS都会内联到HTML中
    sourceMap: true,
  },
};

4. **使用`vue-cli-plugin-vue-style-loader`**：这是一个插件，它允许你在Vue组件中写CSS并自动处理模块化，同时也能添加全局样式。

记得，无论哪种方法，都要确保你的样式不会与已有的全局样式冲突，并且需要避免覆盖重要的内置样式。