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

[Leszeu]

最近自己用 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 文件要怎么搞哦，求助各位大佬了。

[hjdtl]

style 标签中就可以引入了

[anmie]

最无脑的就是直接在 index.html 直接引入，当然了这样写有点暴力
另外就是在配置文件里配置一下，具体代码我没有，你可以以这个思路搜一搜

[Leszeu]

@hjdtl 关键是 style 标签中引入后，methods 方法中怎么使用这个 css 文件了，因为这个插件 css 键值就是 css 的文件路径

[Leszeu]

@anmie index.html 文件中引入代表样式作用全局吧，而我目前是想要在 vue 文件中的 script 标签中引用这个 css 文件的路径哦

[yhxx]

最简单的办法，你把本地的 css 文件上传一份到 cdn 不就行了

[huiyifyj]

style 里写
@import url （"example.css")

[FakeLeung]

不太行，因为最后 js 中都要经过 webpack 打包处理。
要不试试直接 import style from '@/styles/index.css' 看看 style 是什么。

[wujie396]

import printCss from '@/printCss.css'
handlePrint() {
printJS({
style: printCss,
})
}


http://printjs.crabbly.com/

[shintendo]

能不能用 URL.createObjectURL() ？

[wujie396]

@wujie396 搞错了，本地用的 font 输出了 string。正常 css 之类的是空对象。

[matchadog]

要么写 index.html 要么 main.js 引用 要么当前页面的 style 里引用

[jin5354]

把 css 上传到 cdn 或者源站，直接拿链接是最简单的
如果不想拿链接，用 raw-loader 配合 blob URL 也行

[oliver34]

6 楼正解，style 标签里 import

[plm2]

@import url("../static/icon/iconfont.css");

[plm2]

在 style 标签里
<style>
@import url("xxx.css");
</style>

[Sapp]

webpack 的一个特点就是万物皆可以 require...

[zhyl]

vue-cli 2.x 创建的项目把样式文件放在 static 目录下面，然后 css 属性直接填写相对根路径，例如 '/main.css'

vue-cli 3.x 创建的项目样式文件放在 public 目录下面，同样使用相对根路径引用 css

[Leszeu]

@zhyl 这样只在生产环境生效吧，开发时好像没用