美文网首页程序员Vue.js
VueJS如何引入css或者less文件的一些坑

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

作者: 那年一纸花开 | 来源:发表于2018-03-31 21:14 被阅读0次

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

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

require('./assets/stylus/index.styl');

或者:import './assets/stylus/index.styl'

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

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

import '!style-loader!css-loader!stylus-loader!./assets/stylus/index.styl'

就万事大吉了,也可以开始引入css文件了


当然,在进行上面的步骤之前,需要先安装一下几个loader==>>

npm install style-loader --save-dev

npm install css-loader --save-dev

npm install stylus-loader --save-dev

同时在webpack.base.config.js ====>>>

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


另外附上几个示意图:

1===》在main.js中引入外部css文件:

2===》在APP.Vue里面引入外部css文件:

相关文章

  • 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(自定义...

  • CSS常用属性

    一、如何饮用CSS属性到HTML中? 用 标签 style属性 标签引入到css文件当中 在css文件中引入css...

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

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

网友评论

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

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