VueJS引入css或者less文件的一些坑
我们在做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文件的一些坑的更多相关文章
- VueJS如何引入css或者less文件的一些坑
我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即 requir ...
- Thymeleaf模版--子页面单独引入CSS、JS文件
https://blog.csdn.net/u010392801/article/details/80465800 ****************************************** ...
- 使用时间戳引入css、js文件
前言 最近在一家创业公司实习,主要负责新版官网和商家平台管理系统的前端开发和维护,每次测试都要上传文件到ftp服务器端测试,初期由于更新修改比较频繁,每次都是直接上传覆盖css.js.php文件,链接 ...
- MVC-采用Bundles方式引入css和js文件
优点:修改js或css时会自动生成hash版本号. 缺点:需要在BundleConfig中先添加对应的文件,然后在html中再引用对应的bundle,多操作了一步. web.config中 <c ...
- 在VIEW引入CSS、JS文件
外联 CSS: <?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?> generates <!-- ...
- 使用WebJar管理css、JavaScript文件
Web前端使用了越来越多的JS或CSS,如jQuery, Backbone.js 和Bootstrap.一般情况下,我们是将这些Web资源拷贝到Java的目录下,通过手工进行管理,这种通方式容易导致文 ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- html引入css文件
在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...
随机推荐
- RichEditBox 使用自定义菜单
老周:当RichEditBox控件的上下文菜单即将弹出时,会引发ContextMenuOpening事件,我们需要处理该事件,并且将e.Handled属性设置为true,这样才能阻止默认上下文菜单的弹 ...
- Coursera_程序设计与算法_计算导论与C语言基础_数组应用练习
您也可以在我的个人博客中阅读此文章:跳转 编程题#1:求字母的个数 描述 在一个字符串中找出元音字母a,e,i,o,u出现的次数. 输入 输入一行字符串(字符串中可能有空格,请用gets(s)方法把一 ...
- JAVA基础-XML的解析
一.XML的概述 XML的全名为可扩展标记语言(Extensible Markup Language),XML的作用为:1.传输,2.存取数据,3.软件的配置文件.传输现在都用更轻量的Json,而存储 ...
- 日志管理之 Docker logs - 每天5分钟玩转 Docker 容器技术(87)
高效的监控和日志管理对保持生产系统持续稳定地运行以及排查问题至关重要. 在微服务架构中,由于容器的数量众多以及快速变化的特性使得记录日志和监控变得越来越重要.考虑到容器短暂和不固定的生命周期,当我们需 ...
- 微信小程序左滑删除功能
效果图如下: wxml代码: <view class="container"> <view class="touch-item {{item.isTou ...
- Invalid environment specified: http://datatables.org/alltables.env
获取Yahoo股票的API会报错:http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes ...
- 简单的一句sql
表1 Id Name 1 张三 2 李四 3 王五 表二 Id Name1 Name2 1 1 2 2 2 1 3 2 3 4 1 3 我现在要查出结果如下: Id Name1 Name2 1 张三 ...
- sqoop1.4.6从mysql导入hdfs\hive\hbase实例
//验证sqoop是否连接到mysql数据库sqoop list-tables --connect 'jdbc:mysql://n1/guizhou_test?useUnicode=true& ...
- java 操作hbase1.2
说明: .第一部分为代码 .第二部分为工程pom文件 [java] view plain copy import org.apache.hadoop.conf.Configuration; impor ...
- 谈谈今年很火的区块链 CDN
2017 年初,区块链被越来越多的人知道.区块链的概念其实很早就被提出来,曾经有人说过"区块链技术被认为是继蒸汽机.电力.互联网之后,下一代颠覆性的核心技术. 如果说蒸汽机释放了人们的生产力 ...