V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
black11black
V2EX  ›  问与答

使用前端框架搭建网页时,所有的小图标都无法显示,可能是什么原因?

  •  
  •   black11black · 2020-03-04 21:23:02 +08:00 · 1683 次点击
    这是一个创建于 1532 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,我是前端菜鸡,但正享受着框架+css 开发模板带来的光速开发的爽感中

    遇到一个问题,我使用的框架是 vue,脚手架创建项目后,npm 安装了 css 模板,又在 mainjs 里载入,一切工作正常 但是发现所有图标都不能用,也就是红色箭头指的这部分,我在本地运行的时候是不显示的。

    基础不牢地动山摇,不太懂为啥不显示,有没有带佬指点一下

    css 模板地址: https://buefy.org/documentation/input

    6 条回复    2020-03-04 23:38:26 +08:00
    YuxiangLuo
        1
    YuxiangLuo  
       2020-03-04 21:47:13 +08:00 via Android
    https://buefy.org/documentation/start

    看最开始的 Icons,你引入了吗。
    black11black
        2
    black11black  
    OP
       2020-03-04 22:08:53 +08:00
    @YuxiangLuo

    感谢带佬,确实没有引入。还想请问一下,他的说明看不太懂,

    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">

    为什么引入是写成这种形式的,我试了试在组件的 template 部分引入这一行的话是无法引入 css 的,正确的载入姿势是什么?

    还有一个问题是,我看网上教学说

    <style scoped>
    </style>

    加入这个属性之后父组件的样式就不会影响子组件了,子组件会恢复正常。但是我试了试发现仍然会影响子组件啊,一脸懵逼。

    是不是因为我不是直接写的 css,而是使用了 @import "..."载入外部 css 文件,所以导致 scoped 失效的?
    YuxiangLuo
        3
    YuxiangLuo  
       2020-03-04 22:17:50 +08:00 via Android
    link 标签的引入是要编辑 index.html 文件(应该在项目根目录),在 head 标签对里加上那行就行了。

    第二个问题我记不太清了,等别人回答吧。
    ss098
        4
    ss098  
       2020-03-04 22:32:18 +08:00
    Bulma 引用的是第三方的 icon 图标包,所以需要额外引入 CSS,可以 npm 安装后在 scss 文件(或者 vue style 部分)中如下命令引入,或者使用 link 标签。

    @import '~bulma';
    black11black
        5
    black11black  
    OP
       2020-03-04 23:33:50 +08:00
    @YuxiangLuo

    index.html...vue?
    black11black
        6
    black11black  
    OP
       2020-03-04 23:38:26 +08:00
    @black11black

    不好意思,确实有 index.html,都忘了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1013 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 21:15 · PVG 05:15 · LAX 14:15 · JFK 17:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.