zoukankan      html  css  js  c++  java
  • VueJS如何引入css或者less文件的一些坑

    我们在做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文件:

     
     

    小礼物走一走,来简书关注我



    作者:那年一纸花开
    链接:https://www.jianshu.com/p/66fdf2dfec9a
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    软件测试
    python学习之路
    好用的在线画图工具processon
    spring-boot集成dubbo
    公众号开放,关注软件开发过程中的哪些坑
    crontab 中curl命令无法正常执行
    近一月翻阅资料小结
    nginx+tomat8负载后,利用redis实现tomcat8的session共享
    centos7 安装nginx
    centos 上安装redis 3.0.5
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/9796529.html
Copyright © 2011-2022 走看看