vue-cli style @import "";引入外部css,作用域确是全局的解决方案

前沿:


最近在项目开发中发现了一个很是棘手的问题,那就是在我自己的页面并没有引入某个外部的css文件,但是竟然被那个css中的样式给影响了,一开始的解决办法就是在自己的页面加入权重,这样的话代码冗余太多,于是就开始折腾到底之怎么回事,原来是css-loader加载机制的原因,下面把原理以及方法贴出来,以方便后期维护以及自己的学习。

首先看看大家常用的引入方式


上面的代码中,好多人都认为加入scoped就不会被外部的样式影响,但事实并非如此,其实是这样的

css-loader对@import 引入的文件就会当作外部资源,然后将css文件单独取出来,将import引入的css计算结果与

你可能感兴趣的:(vue-cli style @import "";引入外部css,作用域确是全局的解决方案)