我们在做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. 人工智能 tensorflow框架-->简介及安装01

    简介:Tensorflow是google于2015年11月开源的第二代机器学习框架. Tensorflow名字理解:图形边中流动的数据叫张量(Tensor),因此叫Tensorflow 既 张量流动 ...

  2. 张高兴的 Xamarin.Android 学习笔记:(四)常用控件

    示例地址 GitHub : https://github.com/ZhangGaoxing/xamarin-android-demo/tree/master/ControlsDemo

  3. 【转】linux IO子系统和文件系统读写流程

    原文地址:linux IO子系统和文件系统读写流程 我们含有分析的,是基于2.6.32及其后的内核. 我们在linux上总是要保存数据,数据要么保存在文件系统里(如ext3),要么就保存在裸设备里.我 ...

  4. <Mastering KVM Virtualization>:第四章 使用libvirt创建你的第一台虚拟机

    在第3章<搭建独立的KVM虚拟化>中,你安装并启动了libvirtd服务.你还引入了帮助你管理虚拟机的libvirt管理工具virt-manager和virsh. 相较于命令行,新用户总是 ...

  5. Servlet 笔记-过滤器

    Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 可以将一个或多个 Servlet 过滤器附加到一个 Servlet 或一组 Servlet.Servlet 过滤 ...

  6. 【ASP.NET MVC 学习笔记】- 06 在MVC中使用Ninject

    本文参考:http://www.cnblogs.com/willick/p/3299077.html 1.在ASP.NET MVC中一个客户端请求是在特定的Controller的Action中处理的. ...

  7. C#基本功之泛型

    一.没有泛型之前 在没有泛型之前,我们是怎么处理不同类型的相同操作的: 示例1 //下面是一个处理string类型的集合类型 public class MyStringList { string[] ...

  8. 运用El表达式截取字符串/获取list的长度

    ${fn:substring(wjcd.lrsj, 0, 16)} 使用functions函数来获取list的长度 ${fn:length(list)} 引入 <%@ taglib prefix ...

  9. label联动checkbox

    label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.

  10. 域名系统DNS

    一.域名系统是什么 域名系统其实就是一个把主机名解析为IP地址的名字系统. 因特网使用层次树状结构的命名方法,并使用分布式的域名系统DNS.因特网的域名系统DNS被设计成一个联机分布式数据库系统,并采 ...