当我们使用vue组件的时候,使用webpack打包的时候,默认会把vue组件内部的css打包到页面上,但是打包到页面上很丑陋,所以我们希望可以把vue组件内部的css抽离到css文件中,使用vue-style-loader可以实现:

{
 test: /\.vue$/,
  use: [{
   loader: "vue-loader",
   options: {
    loaders: {
     css: ExtractTextPlugin.extract({
      loader: ['css-loader'],
      fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
     }),
     less:ExtractTextPlugin.extract({
      loader: ['css-loader','less-loader'],
      fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
    })
   }
  }
}],

}

分离vue组件内部css的更多相关文章

  1. vue组件内部引入远程js文件

    之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export def ...

  2. vue组件scoped CSS及/deep/深度选择器

    参考链接:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A ...

  3. upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量

    upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...

  4. vue组件如何引入外部.js/.css/.scss文件

    可在相应的单vue组件引入相应文件. 1.引入外部.js文件. 2.引入外部.css文件. 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到 ...

  5. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  6. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  7. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  8. Vue组件库的那些事儿,你都知道吗?

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

  9. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二七║ Nuxt 基础:框架初探

    缘起 哈喽大家好,又是周四了,俗话说周四来了,周末还远么哈哈,老张我也想下周请假,来个16天的大长假哟,不知道大家是怎么请假的,近来发现文章下边已经没有人评论了,赶脚比较凄凉了,大家看到的麻烦点个赞呀 ...

随机推荐

  1. topcoder srm 520 div1

    problem1 link 设$f[i][j][k]$表示考虑了前$i$道题,剩下时间为$j$,剩下技能为$k$的最大得分. 从小到大计算二元组$(j,k)$的话,在存储上可以省略掉$i$这一维. p ...

  2. Python3 tkinter基础 Canvas create_text 在画布上添加文字

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. Python3基础 list pop(含参) 取出列表中的指定索引的元素

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. linux内核中的DMI是什么?

    答: 桌面管理接口(Desktop Management Interface).是用来获取硬件信息的,在内核中有一个配置项CONFIG_DMI用来添加此功能到内核中!

  5. grub基本应用

    一.基本概念 GRUB(boot  loader):  GRand Unified Bootloader 两个版本: grub .x: grup legacy grub .x: grub2 grub ...

  6. HDU 4638 Group(莫队)题解

    题意:n个数,每个数有一个值,每次询问一个区间,问你这个区间能分成连续的几段(比如7 1 2 8 就是两端 1 2 和 7 8) 思路:莫队.因为L.R移动顺序wa了20发...问了一下别人,都是先扩 ...

  7. 常用Iview样式布局

    type 布局模式,可选值为flex流式布局或不选,在现代浏览器下有效 flex 布局下的垂直对齐方式,align可选值为top.middle.bottom flex 布局下的水平排列方式,justi ...

  8. 【OData】使用Odata获取数据之后再次获取可能得不到最新的数据问题记录

    工作上遇到个问题是关于系统后台数据库更新了某数据后, 前台界面刷新显示的不是最新的数据.但是大约10分后再次刷新就能显示新的数据,或者重启IIS等web server host. 最开始认为可能是因为 ...

  9. Druid介绍2

    Druid的发送数据和查询数据 Druid 开篇 - 大数据实时探索性分析平台 官网 Druid 一次海量数据实时处理的实践 使用HDFS作为Druid的deepStorage 在哪里下载druid ...

  10. Linux命令之nl命令

    nl 命令在 Linux 系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号,其默认的结果和 与 cat -n 有点不太一样,nl 可以将行号做比较多的显示设计,包括位数是否自动补齐 ...