vue 怎么改掉全局css 样式_vue单页应用如何取消全局css的注入

最近工作上在用vue对现有项目进行重构。之前也用vue做过一些后台项目，但都是全新的项目，而且项目很小，所以遇到的问题很少。本次重构遇到了一些问题，做个记录。

先说一下，开始理解的误区：

在A组件中import css，那么css 就会应用于该组件及其子组件

组件可以设置类似 html 或者 body等标签的样式

本次项目重构样式基本没有做修改，所以最开始一股脑的将项目中的所有css 都import进来了。包括css的样式重置。但项目中有个页面的样式重置和其它页面不同，尝试了一下方法：

改变import "reset.css" 的组件位置 =》 放在任何组件中 import 进css后，单页应用都会在单页应用的header 中添加一个style标签，将import 的css引入

在样式有变化的组件中，在

经过研究，发现之前提到的误区，是css-loader造成的，正确的理解是：

1.css-loader 默认将import 或require 的css 文件插入到全局

By default CSS exports all classnames into a global selector scope. Styles can be locally scoped to avoid globally scoping

css-loader 提供了:local(.className) ，来将某一个.className 设置为scoped，但对项目的实际情况不是很实用，首先我们是reset css 不同，没有className， 其次即使全是className，全部加上:local工作量也很大，个人感觉