我们在做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. PHP Server Nginx 安装

    1. PHP 安装: http://jingyan.baidu.com/article/b2c186c8f16d05c46ef6ff3c.html PHP 问题: http://www.cnblogs ...

  2. Linux系列教程(一)——Linux系统简介

    本系列教程将完整的讲解整个Linux相关的知识,这是楼主学完之后重新对Linux知识体系的整理.从最基础的知识开始,对于一个完全不懂Linux系统的人,相信在看完整个系列教程之后,都能对Linux有一 ...

  3. 使用HTML DOM 来分配事件 —— onmouseover和onmouseout ,onmousedown和onmouseup

    一, onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 一个小例:鼠标未在 ...

  4. VS连接数据库的通用方法(SQL/MySql)

    在vs里面连接数据库的方法有很多,这里是通用的方法和基本操作 SQL /// <summary> /// 数据访问抽象基础类 /// Copyright (C) Maticsoft /// ...

  5. Thrift - 快速入门

    简单实例 有homebrew的话,直接执行以下命令即可,brew会处理相关依赖(https://thrift.apache.org/docs/install/). brew install thrif ...

  6. Spring bean 生命周期验证

    一.从源码注释看bean生命周期 从JDK源码上看,BeanFactory实现类需要支持Bean的完整生命周期,完整的初始化方法及其标准顺序(格式:接口 方法)为: 1.BeanNameAware s ...

  7. [oracle 使用(1)] win7/10 下Oracle10g的安装与卸载

    1.安装前提 首先要确保你的电脑之前没有安装过,或者安装过但是已经卸载干净了.至于如何查看是否卸载干净可以看看我后面的Oracle卸载步骤. 2.Oracle的安装. 2.1.首先自己在Oracle官 ...

  8. LeetCode 538. Convert BST to Greater Tree (把二叉搜索树转换成较大树)

    Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the original B ...

  9. Oracle官方非托管Odac驱动与Oracle官方托管odac驱动

    方便自己,方便他人,记一次连接oracle的经历,使用 [Oracle官方非托管Odac驱动,Oracle.DataAccess.Client]连接数据库的时候程序会报错,找了很久都不知道是什么原因, ...

  10. echarts教程-asp.net+ashx实现堆积柱状

    说说看.崔西莲夫人紧接着说. 想不到史春吉是这种人. 你会这样说倒是有趣,因为这正是我当时的感觉.这跟奈维尔的个性不合.奈维尔,就像大部分男人一样,通常都是尽量避开任何可能造成尴尬或不愉快的场面.我怀 ...