我们在做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. uva242,Stamps and Envelope Size

    这题紫薯上翻译错了 应该是:如果有多个并列,输出邮票种类最少的那个,如果还有并列,输出最大面值最小的那个 坑了我一个下午 dp[p][q]==1表示可以用不超过q张组成面额p 结合记忆化,p从1开始枚 ...

  2. java字串加密

    字串加密 1.设计思想: (1)加密方法,字符串的每一个字符都代表这个字符往后的第三位,最后三个字符代表,开始的三个字符. (2)解密方法,字符串的每一个字符都代表这个字符往前的第三位,开始三个字符代 ...

  3. maven搭建MVC项目具体步骤

    一.目标 在这篇文章中,我将要向您展示如何使用spring Frameworks 和 Maven build创建您的第一个J2ee 应用程序. 二.信息 Maven是一个Java项目的构建工具(或者自 ...

  4. CNCC2017梳理

    大牛云集的中国计算机大会:大会日程表:http://cncc.ccf.org.cn/cn/news/schedule_empty 早上的论坛可以在爱奇艺下载视频 下午的分论坛是多个同时进行的,我也只去 ...

  5. swift之函数式编程(二)

    本文的主要内容来自<Functional Programming in Swift>这本书,有点所谓的观后总结 在本书的Introduction章中: we will try to foc ...

  6. CSS基础:基础和语法

    **CSS语法** CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.选择器通常是您需要改变样式的 HTML 元素.```selector {declaration1; declarati ...

  7. Github和Github for windows的使用简介

    很多程序员都把自己开发的代码放到Github上,方便自己管理也有利于别人查阅.所以这两天我也捣鼓了一下这个东西,现在把怎么使用Github和Github for windows简单的总结一下. 1.现 ...

  8. CodeForces 11D(状压DP 求图中环的个数)

    Given a simple graph, output the number of simple cycles in it. A simple cycle is a cycle with no re ...

  9. css 行内元素设置宽高

    有2中实现方法: 1.设置display:block   inline-block,使其width属性生效 2.如果设置float:left | right, 使其width属性生效. (浮动)使得指 ...

  10. jQuery 插件格式 规范

    方式一(自定义对象): (function($, window, document) {  var Plugin, defaults, pluginName; 调用时的函数名:     pluginN ...