vue打包@import引入样式为全局样式，作用域解决方案

一. 问题描述

  最近在做vue的webpack框架的时候，发现@import导入的样式在调试的阶段是没有问题的，但是在打包发布到nginx上面之后里面的样式居然会影响到全局。这个时候我的眼前亿万一个草泥马就过去了。

  后来就是在网络上各种查找资料解决，虽然有的可以解决，但是带来的后果就是需要我一个文件一个文件的进行修改，这样导致很大的工作量。而且这个@import使用的是相对路径。

二. 网络原因分析

1> 来自 https://www.cnblogs.com/ajaxlu/p/9086651.html 的分析

  具体这哥们是怎么操作的我就不写了，打开网址看看，有很多人的操作方法和他是一样的，但是我测试过了，一样不能用，可能是我这边的框架配置上有问题吧，不适合人家的这种方式：

而且这个的这句话我是不太认同的，因为我以前也是用@import导入了局部的样式的。

2> 来自 https://blog.csdn.net/weixin_39941429/article/details/80254724

  这个哥们的解释还是比较中规中矩的，虽然他的操作方式和上个哥们的是一样的，并且我也没有成功，但是他的分析我还是比较认同的。

三. 我的解决方案

  其实解决方案是比较简单的，不知道你们的错误原因是不是和我一样。按实际来说这个css文件应该是属于静态文件的，但是我蛋疼的没有将这个文件放在static里面，而是将其放在了src下面，所以导致打包的时候连css也一起打包编译了。

  后来我将css文件放在了static文件夹下面一切就都正常了。

四. 提个问题

  不知道有没有兄弟解决这个@import只能导入相对路径的问题，能不能直接从根路径导入？（我见过有别人的项目可以这样操作，但是我知道家人的配置是怎么弄的。）