美文网首页
VueJS引入css或者less文件的一些坑

VueJS引入css或者less文件的一些坑

作者: hawkzz | 来源:发表于2017-06-01 10:54 被阅读0次

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

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

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

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

vue1.png

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

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

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

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

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

vue2.png

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

npm install  style-loader --save

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

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

相关文章

  • VueJS引入css或者less文件的一些坑

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

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

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

  • 尝试webpack

    引入文件的路径必须正确,比如引入样式的时候,less就是less, css 就是css,必须是正确的路径。还有一些...

  • css】全局css文件

    引入全局css或者less文件 在main.js里直接引入 所有的全局样式都可以在这引入。 在index.html...

  • less

    1.less支持普通css所有语法 2.在.vue文件中使用less: 3.引入外部less: global.le...

  • less

    安装: 直接引入less.js 或者 npm1、 2、lessc style.less >ok.css 编...

  • Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义...

  • vue中引入外部css的配置方法

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义...

  • IntellJ idea使用FileWatch实时编译less文

    前言 开发前端的时候,经常会写一些less或者sass文件,但这些文件需要编译成css文件才有效,之前会使用一些自...

  • 代码库

    1、less文件 less文件本身不能够被浏览器识别,所以要使用less文件,必须引入less.js文件,...

网友评论

      本文标题:VueJS引入css或者less文件的一些坑

      本文链接:https://www.haomeiwen.com/subject/jnisfxtx.html