V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Leszeu
V2EX  ›  Vue.js

Vue 单文件 methods 方法中引用本地 CSS 的问题

  •  
  •   Leszeu · 2018-11-30 08:58:14 +08:00 · 4045 次点击
    这是一个创建于 2172 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近自己用 Vue 在写一个后台管理系统,有个页面需要用到打印功能,于是采用了 print.js 这个库,调用如下:

          handlePrint() {
            printJS({
              printable: 'printOrder',
              type: 'html',
              css: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
              scanStyles: false,
              header: '信息中心耗材领用单',
              headerStyle: 'font-size: 20px;text-align: center;margin-top: 0'
            })
          }
    

    其中 css 键值引用的是 CDN 的 index.css 文件,我现在想引用项目本地的 css 文件要怎么搞哦,求助各位大佬了。

    18 条回复    2018-11-30 19:07:33 +08:00
    hjdtl
        1
    hjdtl  
       2018-11-30 09:03:56 +08:00
    style 标签中就可以引入了
    anmie
        2
    anmie  
       2018-11-30 09:19:08 +08:00
    最无脑的就是直接在 index.html 直接引入,当然了这样写有点暴力
    另外就是在配置文件里配置一下,具体代码我没有,你可以以这个思路搜一搜
    Leszeu
        3
    Leszeu  
    OP
       2018-11-30 09:28:06 +08:00
    @hjdtl 关键是 style 标签中引入后,methods 方法中怎么使用这个 css 文件了,因为这个插件 css 键值就是 css 的文件路径
    Leszeu
        4
    Leszeu  
    OP
       2018-11-30 09:30:19 +08:00
    @anmie index.html 文件中引入代表样式作用全局吧,而我目前是想要在 vue 文件中的 script 标签中引用这个 css 文件的路径哦
    yhxx
        5
    yhxx  
       2018-11-30 09:30:53 +08:00
    最简单的办法,你把本地的 css 文件上传一份到 cdn 不就行了
    huiyifyj
        6
    huiyifyj  
       2018-11-30 09:32:57 +08:00 via Android
    style 里写
    @import url ("example.css")
    FakeLeung
        7
    FakeLeung  
       2018-11-30 09:36:22 +08:00
    不太行,因为最后 js 中都要经过 webpack 打包处理。
    要不试试直接 import style from '@/styles/index.css' 看看 style 是什么。
    wujie396
        8
    wujie396  
       2018-11-30 09:41:15 +08:00
    import printCss from '@/printCss.css'
    handlePrint() {
    printJS({
    style: printCss,
    })
    }


    http://printjs.crabbly.com/
    shintendo
        9
    shintendo  
       2018-11-30 09:50:05 +08:00
    能不能用 URL.createObjectURL() ?
    wujie396
        10
    wujie396  
       2018-11-30 10:02:21 +08:00
    @wujie396 搞错了,本地用的 font 输出了 string。正常 css 之类的是空对象。
    matchadog
        11
    matchadog  
       2018-11-30 10:23:41 +08:00
    要么写 index.html 要么 main.js 引用 要么当前页面的 style 里引用
    jin5354
        12
    jin5354  
       2018-11-30 10:30:56 +08:00
    把 css 上传到 cdn 或者源站,直接拿链接是最简单的
    如果不想拿链接,用 raw-loader 配合 blob URL 也行
    oliver34
        13
    oliver34  
       2018-11-30 11:29:01 +08:00
    6 楼正解,style 标签里 import
    plm2
        14
    plm2  
       2018-11-30 13:15:12 +08:00
    @import url("../static/icon/iconfont.css");
    plm2
        15
    plm2  
       2018-11-30 13:16:38 +08:00
    在 style 标签里
    <style>
    @import url("xxx.css");
    </style>
    Sapp
        16
    Sapp  
       2018-11-30 13:34:29 +08:00   ❤️ 1
    webpack 的一个特点就是万物皆可以 require...
    zhyl
        17
    zhyl  
       2018-11-30 13:54:57 +08:00   ❤️ 1
    vue-cli 2.x 创建的项目把样式文件放在 static 目录下面,然后 css 属性直接填写相对根路径,例如 '/main.css'

    vue-cli 3.x 创建的项目样式文件放在 public 目录下面,同样使用相对根路径引用 css
    Leszeu
        18
    Leszeu  
    OP
       2018-11-30 19:07:33 +08:00 via iPhone
    @zhyl 这样只在生产环境生效吧,开发时好像没用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2946 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:11 · PVG 22:11 · LAX 06:11 · JFK 09:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.