V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
waiaan
V2EX  ›  JavaScript

(vue)如何根据后端返回的文件路径 import 样式文件?

  •  
  •   waiaan · 2019-03-29 13:57:19 +08:00 · 3298 次点击
    这是一个创建于 1826 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一开始的时候发请求给后端,后端返回要 css 样式文件名或者路径,然后需要引入这个 css 文件,除了创建 link 标签,能不能在 vue 里 import 这个文件?、 谢谢!

    17 条回复    2019-03-30 11:39:59 +08:00
    Sean94
        1
    Sean94  
       2019-03-29 14:11:26 +08:00
    Promise.all([import('xxxx'), import('xxx')]).then(() => {})
    Sean94
        2
    Sean94  
       2019-03-29 14:12:21 +08:00
    murmur
        3
    murmur  
       2019-03-29 14:13:34 +08:00
    import 是会被 webpack 翻译成他自己的 template 的 这东西还挺麻烦 我们最近再改这个
    甚至在打包的时候就会被抽取到 vendor 或者 css 里,所以你要动态加载就老老实实自己放 style 标签吧
    onaug6th
        4
    onaug6th  
       2019-03-29 14:14:47 +08:00
    在 JS 中 import(路径) 可以达到效果
    waiaan
        5
    waiaan  
    OP
       2019-03-29 14:36:53 +08:00
    @Sean94 谢谢,这个方法似乎不可行。
    @onaug6th 能否具体说一下?谢谢。
    TwoDays91
        6
    TwoDays91  
       2019-03-29 14:48:26 +08:00
    现在 js import 可以直接加载 css 文件了? webpack 打包 import 会转为一个动态加载机制,一般情况下也只用作本地文件的加载,像你这种从后端取的文件地址说不定还有问题,就用 style 标签蛮好,大不了封装一层。
    rabbbit
        7
    rabbbit  
       2019-03-29 14:51:47 +08:00
    一般写道里边的 import 都是这样的:
    mounted() {
    ...if(isIos) {
    ......import('./newIe6.css')
    ...}
    }
    不过这好像是被 webpack 打包起来的,在线的话用不了
    wednesdayco
        8
    wednesdayco  
       2019-03-29 18:46:17 +08:00
    wednesdayco
        9
    wednesdayco  
       2019-03-29 18:52:08 +08:00
    不过针对 non-JavaScript MIME type 的文件是不能使用该方法的,你后端的文件 MIME 需要修改。
    murmur
        10
    murmur  
       2019-03-29 18:54:47 +08:00
    @wednesdayco 这个是被改成内部函数了 前几天刚研究过这部分代码 有个 jsonptemplate 里写了怎么转换 webpack 会把每个文件根据路径转成 id 然后记录哪个文件加载过没有 所以这依存关系还挺麻烦
    wednesdayco
        11
    wednesdayco  
       2019-03-29 19:06:46 +08:00
    @murmur 从原理上来说是可行的- -但是这个实现实在是太绕了,不如直接 link ……如果非得要在 vue 里引用后端传入的 css 怕是要做不少工作(最好还是 css in javascript 吧)。
    shynome
        12
    shynome  
       2019-03-29 19:10:39 +08:00 via Android
    前台做方法映射
    {
    'path':()=>import('path')
    }
    learnshare
        13
    learnshare  
       2019-03-29 19:12:26 +08:00
    DOM 加 link 比较快吧
    yikuo
        14
    yikuo  
       2019-03-30 00:28:18 +08:00 via Android
    可以用 vue-meta
    waiaan
        15
    waiaan  
    OP
       2019-03-30 11:19:58 +08:00
    @wednesdayco
    @learnshare
    @TwoDays91
    @murmur
    css 放 link 里,不能覆盖 vue 组件里的样式?
    TwoDays91
        16
    TwoDays91  
       2019-03-30 11:27:51 +08:00
    拿得看你组件样式有没有使用 scoped,或两者 css 先后顺序决定。
    learnshare
        17
    learnshare  
       2019-03-30 11:39:59 +08:00
    @waiaan 取决于样式的写法,位置,优先级等条件
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   954 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:11 · PVG 05:11 · LAX 14:11 · JFK 17:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.