用 vue-cli 创建的项目,怎么一个 components 引用一个 css 文件

[m939594960]

我 import 这个 css 在 index.vue

import '../assets/fuck.css'

生成的文件就会在 head 种加入这个文件中的样式。

但是每个页面的 css 都是单独写的比如

index.vue 引用 index.css

index1.vue 引用 index1.css

我想要他能每个页面加载每个页面对应的 css 应该怎么配置

我看到很多人都说用这种方法

<style scoped>
    @import '../assets/index1.css'
</style>

但是我试了一下是不行的，不知道是什么问题 http://p1.bpimg.com/4851/c116decb60d60fb4.png

http://p1.bpimg.com/4851/47a43ee55acc4d76.png

[zhuangtongfa]

直接 src="xxx.css"就行

[m939594960]

@zhuangtongfa 具体怎么写？ <link rel="stylesheet" href="../assets/fuck.css"> 是这样么？ 那这段写在哪 我写在
<template></template>里 报错

[cyio]

避免使用 scoped 特性，会带来不必要的麻烦，请手动使用命名空间解决

[zhuangtongfa]

@m939594960
<style scoped src="xxx.css">

</style>

[m939594960]

@zhuangtongfa 恩 试了一下 果然好用了

[m939594960]

@cyio 会带来什么样的麻烦呢？项目是以前写的 html+css 所以很混乱，改起来比较费劲。

[zhuangtongfa]

@m939594960
我觉得没啥大问题，只是如果你要换到别的框架， css 会有麻烦，毕竟其他框架没 scoped

[cyio]

scoped 缺点：
1. 不支持 media query 以及 after 伪元素
2. 动态插入 html 时样式不起作用

<div class="example" _v-f3f3eg9>hi</div>
你无法预先知道生成的 ID 是什么，也就无法后续去控制

scoped style 如何处理动态的 html 标签? · Issue #239 · vuejs/vue-loader https://github.com/vuejs/vue-loader/issues/239

[m939594960]

@cyio 了解了 十分感谢

[zhuangtongfa]

@m939594960 @cyio 更新
vue 2.0 的 scoped 是支持媒体查询的,伪元素也是一直支持的
http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484329&idx=1&sn=f79da7c92cda7352c8a651f459ef4172&chksm=9723616ba054e87df94522a9c67de26c9ac1f2532198506f47f9c589070d4c530a66ed37dd70&scene=0#wechat_redirect