Vue中import 引入样式文件污染问题，手动测试过几乎所有情况

我分别在两个页面加了两个相同的类名 class="test-global"

直接上代码和展示：

 form页面，这个页面我引入样式

代敏form页面，这个页面不引入样式

 

form页面引入样式分如下几种情况:

1.当lang="css"时

        1> 通过标签内引入，这种方式不会污染有相同类名的页面

<style scoped lang="css" src="../../styles/global.css">

         

        2> 通过import方式引入 ，这两种方式都会污染（影响）其他页面

        

 2.当lang="scss"时，

        1> 通过标签内引入，这种方式不会污染有相同类名的页面

        

         2> 通过import方式引入，看图！

        

 

3.还有一种情况，就是在script中引入，不建议！

这种必定会全局污染！！！除非有命名空间，不要这么写哈

总结：

只有当lang='css'的时候，
@import '@/styles/global.css';
@import url('../../styles/global.css');
这两种引入方式都会污染，必须通过标签内引入才可以

当lang='scss'的时候（less我没测，我估计跟scss同理，我实际项目都是用less这样引入局部样式）

@import '@/styles/global.scss'; // 这种不会全局污染！！！
@import url('../../styles/global.scss'); // 这种会全局污染