vue-cli怎样正确的在.vue文件中引入css文件?

在.vue文件使用<style src="xxx.css"></style>这种方法引入的css文件,在npm run build后会把所有的css文件打包成一个css文件,而且生成的文件名是app.xxxxxxxxxxxxxxxxxxxxx.css这样子的,又长又臭!
怎样解决这个问题使得build后的文件每个css对应一个link标签?

还有,如果是自己写的scss该怎么引用?

JellyBool

app.xxxxxxxxxxxxxxxxxxxxx.css 这个是 version 后的吧,主要是为了避免缓存。

你配置一下你的 webpack ,不要使用 version() 这个方法应该就 OK 了。

自己的 scss 文件照样引用:

<style lang="scss">
@import 'src/assets/csss/mycss_lib.css';
</style>
yzha5 回复 JellyBool

原来是这样,受教了。那么怎样才能引入JS文件呢?使用import只是载入依赖。

JellyBool 回复 yzha5

js 文件都是一样的啊

yzha5 回复 JellyBool

确实,之前还以为JS也会像import css那样展示在代码里,原来它都打包在app.js里了。但是问题又来了,这些第三方css、js能不能按需要加载?现在打包生成的css文件已经>10mb了,js文件也有5.6mb,这也太吓人了!!

JellyBool 回复 yzha5

哦。。。没见过这么大的。

你分开打包就好。公用的直接就打包到一起,然后浏览器就会缓存的

yzha5 回复 JellyBool

老外那买的一套H5模板,用了各种各样的插件,这些插件的css和js加起来就>100mb了。去掉一些用不上的,还有20多M。如果要精减体积,那可费老劲了!!