vue引入外部.css文件，webpack将其与.vue中的样式混合打包了，怎么办？
2024-10-14 01:13:46
我使用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='******'>的形式引入呢？
如果你不想被打包，那就没必要在js中引入了，直接在index.html页面上<link href='******'>就好，对于大小而言，请求两个单独css文件，可能比单独请求一个合并的css文件消耗更大的带宽，而且增加了网络请求数量，所以上线阶段合并是更好的选择。上线版应该侧重点于减少网络请求量，提升加载速度，开发版才应该侧重于代码美观。
最新文章
- nodejs cookie管理
- CreateIoCompletionPort() 函数
- icon@font-face那些事
- [转]Win7下安装配置sharepoint server 2010
- matlab(数组、矩阵）
- JavaScript基础篇最全
- 用C语言实现统计一个文件夹中各种文件的比例
- 8 fastJson的使用
- Office OpenXML-Excel(一)
- 深入浅出Windows BATCH
- redis安装和配置教程phpredis扩展安装测试
- java中equals与==的区别
- UPC 6616 Small Mulitple
- android.view.WindowManager$BadTokenException: Unable to add window
- sitecore系统教程之内容编辑器
- Integration Guide
- java 路径、className.class.getResourceAsStream()、ClassLoader.getSystemResourceAsStream() 、FileInputStream
- Android初体验之Monkey和MonkeyRunner
- Servlet讲解
- PHP -- 8个必备的PHP功能开发