（vue）如何根据后端返回的文件路径 import 样式文件？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2100 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

文件

import

Vue

CSS

17 条回复 • 2019-03-30 11:39:59 +08:00

Sean94

2019-03-29 14:11:26 +08:00

Promise.all([import('xxxx'), import('xxx')]).then(() => {})

Sean94

2019-03-29 14:12:21 +08:00

具体的 promise 用法可以看看文档
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

murmur

2019-03-29 14:13:34 +08:00

import 是会被 webpack 翻译成他自己的 template 的这东西还挺麻烦我们最近再改这个
甚至在打包的时候就会被抽取到 vendor 或者 css 里，所以你要动态加载就老老实实自己放 style 标签吧

onaug6th

2019-03-29 14:14:47 +08:00

在 JS 中 import(路径) 可以达到效果

waiaan

2019-03-29 14:36:53 +08:00

@Sean94 谢谢，这个方法似乎不可行。
@onaug6th 能否具体说一下？谢谢。

TwoDays91

2019-03-29 14:48:26 +08:00

现在 js import 可以直接加载 css 文件了？ webpack 打包 import 会转为一个动态加载机制，一般情况下也只用作本地文件的加载，像你这种从后端取的文件地址说不定还有问题，就用 style 标签蛮好，大不了封装一层。

rabbbit

2019-03-29 14:51:47 +08:00

一般写道里边的 import 都是这样的:
mounted() {
...if(isIos) {
......import('./newIe6.css')
...}
}
不过这好像是被 webpack 打包起来的,在线的话用不了

wednesdayco

2019-03-29 18:46:17 +08:00

你是不是需要这个 https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

wednesdayco

2019-03-29 18:52:08 +08:00

不过针对 non-JavaScript MIME type 的文件是不能使用该方法的，你后端的文件 MIME 需要修改。

murmur

2019-03-29 18:54:47 +08:00

@wednesdayco 这个是被改成内部函数了前几天刚研究过这部分代码有个 jsonptemplate 里写了怎么转换 webpack 会把每个文件根据路径转成 id 然后记录哪个文件加载过没有所以这依存关系还挺麻烦

wednesdayco

2019-03-29 19:06:46 +08:00

@murmur 从原理上来说是可行的- -但是这个实现实在是太绕了，不如直接 link ……如果非得要在 vue 里引用后端传入的 css 怕是要做不少工作（最好还是 css in javascript 吧）。

shynome

2019-03-29 19:10:39 +08:00 via Android

前台做方法映射
{
'path':()=>import('path')
}

learnshare

2019-03-29 19:12:26 +08:00

DOM 加 link 比较快吧

yikuo

2019-03-30 00:28:18 +08:00 via Android

可以用 vue-meta

waiaan

2019-03-30 11:19:58 +08:00

@wednesdayco
@learnshare
@TwoDays91
@murmur
css 放 link 里，不能覆盖 vue 组件里的样式？

TwoDays91

2019-03-30 11:27:51 +08:00

拿得看你组件样式有没有使用 scoped，或两者 css 先后顺序决定。

learnshare

2019-03-30 11:39:59 +08:00

@waiaan 取决于样式的写法，位置，优先级等条件