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

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

还有，如果是自己写的scss该怎么引用？

共 6 条回复

7年前

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

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

自己的 scss 文件照样引用：

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

yzha5 回复 JellyBool

7年前

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

JellyBool 回复 yzha5

7年前

js 文件都是一样的啊

yzha5 回复 JellyBool

7年前

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

JellyBool 回复 yzha5

7年前

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

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

yzha5 回复 JellyBool

7年前

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

登录并参与讨论