我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢?

  首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即

  require('./assets/css/main.less');

  这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析

  

  这时,我们要填写上依赖,

  require('!style!css!less!./assets/css/main.less');

  在很多以前的博客里都是以上写法,这个是Vue 2.0刚开始的,现在使用会报错;下面是正确写法  

   require('!style-loader!css-loader!less-loader!./assets/css/main.less');

  在以前配置到这里,就万事大吉了,也可以开始引入css文件了,然后现在到这里还会报错

   

  当出现以上错误时,说明你的项目里缺少依赖;  

   npm install  style-loader --save

  这时你就可以引入css文件了;

  

原文: http://blog.hawkzz.com/2017/03/14/VueJS引入css或者less文件的一些坑/  作者: hawk_zz

VueJS引入css或者less文件的一些坑的更多相关文章

  1. VueJS如何引入css或者less文件的一些坑

    我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即 requir ...

  2. Thymeleaf模版--子页面单独引入CSS、JS文件

    https://blog.csdn.net/u010392801/article/details/80465800 ****************************************** ...

  3. 使用时间戳引入css、js文件

    前言 最近在一家创业公司实习,主要负责新版官网和商家平台管理系统的前端开发和维护,每次测试都要上传文件到ftp服务器端测试,初期由于更新修改比较频繁,每次都是直接上传覆盖css.js.php文件,链接 ...

  4. MVC-采用Bundles方式引入css和js文件

    优点:修改js或css时会自动生成hash版本号. 缺点:需要在BundleConfig中先添加对应的文件,然后在html中再引用对应的bundle,多操作了一步. web.config中 <c ...

  5. 在VIEW引入CSS、JS文件

    外联 CSS: <?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?> generates <!-- ...

  6. 使用WebJar管理css、JavaScript文件

    Web前端使用了越来越多的JS或CSS,如jQuery, Backbone.js 和Bootstrap.一般情况下,我们是将这些Web资源拷贝到Java的目录下,通过手工进行管理,这种通方式容易导致文 ...

  7. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  8. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  9. html引入css文件

    在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...

随机推荐

  1. Android 添加水印, 以及屏幕存取

    /** * 获取水印 */ try { String s = CustomPreferences.getUserInfo().getAccountNo().substring(7,11); View ...

  2. PHP连接mysql数据库进行增删改查--删除

    删除: 1.首页 在foreach里面加入   <td><a href='dele.php?id={$i[0]}'>删除</a></td> 在上面< ...

  3. 雅虎军规以及Chrome调试

    1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等.减少组件数必然能够减少页面提交的HTTP请求数.这是让页 ...

  4. Java基础(00)

    Java发展史 Java之父:詹姆斯.高斯林(James Gosling). SUN(Stanford University Network 斯坦福大学网络公司)产物. 1995年5月23日,java ...

  5. java springmvc+bui+bootstrap后台管理系统搭建

    先来说说bui,这个框架是阿里巴巴的一个前端团队研发的,能够用很少的代码快速搭建一个后台管理系统,很适做管理平台的开发, 之前用过类似这样的框架extjs,做个比较,这个框架实现功能比extjs的代码 ...

  6. oracle数据库无监听程序

    在电脑---服务---启动oracle  tns 如果还是出现错误的话,找到Net Manager,将网络的ip监听删除,将本机的主机名配好,即可打开tns服务

  7. 微信小程序用setData修改数组或对象中的一个属性值

    在page中有如下数组 data: { info:[ { name:"yuki", tou:"../img/head.jpg", zGong:130, gMon ...

  8. Ant 基本语法的使用示列

    ant -f build.xml  执行你的build.xml文件   <?xml version = "1.0"?> <project name = " ...

  9. java项目log4j日志打印配置

    #定义输出级别和输出平台  添加DEBUG表示打印sql 语句 log4j.rootLogger=DEBUG,INFO,ERROR,stdout,R log4j.category.org.spring ...

  10. 关于01背包求第k优解

    引用:http://szy961124.blog.163.com/blog/static/132346674201092775320970/ 求次优解.第K优解 对于求次优解.第K优解类的问题,如果相 ...