您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> Web开发 >> vue引入外部css文件,webpack将其与vue中的样式混合打包了,怎么办?

vue引入外部css文件,webpack将其与vue中的样式混合打包了,怎么办?

来源:网络整理     时间:2018/1/29 2:45:15     关键词:

关于网友提出的“ vue引入外部css文件,webpack将其与vue中的样式混合打包了,怎么办?”问题疑问,本网通过在网上对“ vue引入外部css文件,webpack将其与vue中的样式混合打包了,怎么办?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: vue引入外部css文件,webpack将其与vue中的样式混合打包了,怎么办?
描述:

先说明一下我遇到的问题:
我使用vue-cli搭自己的博客,希望引入公共样式:

// main.js
import './assets/styles/common.css'

我本来是希望webpack打包后,能将这个样式独立打包,在生成的html文件中用<link href='/static/css/common.css'>这样的形式引入,这样浏览器就能缓存,各个页面需要的话就import一下,也不用重新加载了,可是谁知道,webpack将我的common.css文件打包到了app.css中,混到一起了,这样还复用个毛啊。。。
build/webpack.base.conf.js中有开关,能启用extract-text-webpack-plugin插件,我试过启用

// vue-loader.conf.js
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: true  // 这儿原本是isProduction,我给修改成true,打开extract开关
  }),
  ...
}


// webpack.base.conf.js
plugins: [
  new ExtractTextWebpackPlugin('common.css')
]

然而并没有什么卵用,还是把我的common.css混到app.css中了。。。(下图为npm run build后得到的css文件)

那么问题来了,挖掘,哦不对,是怎么配置webpack,才能实现:组件中以import引入css文件,该css文件独立打包,并以在生成的<link href='******'>的形式引入呢?


解决方案1:

如果你不想被打包,那就没必要在js中引入了,直接在index.html页面上<link href='******'>就好,对于大小而言,请求两个单独css文件,可能比单独请求一个合并的css文件消耗更大的带宽,而且增加了网络请求数量,所以上线阶段合并是更好的选择。上线版应该侧重点于减少网络请求量,提升加载速度,开发版才应该侧重于代码美观。

解决方案2:

直接在index.html里引用不就可以了。。你又没必要把common.css当模块使..


以上介绍了“ vue引入外部css文件,webpack将其与vue中的样式混合打包了,怎么办?”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/4537143.html

相关图片

相关文章