javascript - vue单文件style里scoped无效，求指教原因。-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - vue单文件style里scoped无效，求指教原因。

仅有的幸福 2017-05-19 10:27:37

[JavaScript讨论组]

1421

a.vue

<template>
    <p>
        <button class="btn btn-primary">11a.vue</button>
    </p>
</template>
<style scoped>
    @import '../css/bootstrap.css';
    
</style>

b.vue

<template>
    <p>
        <button class="btn btn-primary">b.vue</button>
    </p>
</template>
<style scoped>
    
</style>

但是在访问b.vue的时候却附带了boostrap的样式，scoped没起隔离作用域的效果？

仅有的幸福

全部回复(3)

phpcn_u15822017-05-19 10:29:37 3楼

我猜测啊，是@import的原因

首先我们看一下vue-loader的scoped的原理：
https://vue-loader.vuejs.org/...

b页面带有bootstrap的样式只能说明bootstrap的css没有经过vue-loader处理，然后我又去搜了以下postcss和@import关键字，然后发现了postcss-import插件：
https://www.npmjs.com/package...

我觉得你把这个插件用上的话应该可以解决问题，但我没测试，纯属猜测

赞 +0

添加回复

过去多啦不再A梦2017-05-19 10:29:37 2楼

你找下b的父级页面，一级一级往上找，肯定是那个页面引用了

赞 +0

添加回复

大家讲道理2017-05-19 10:29:37 1楼

把@import '../css/bootstrap.css';去掉；
换成<style src="../css/bootstrap.css" scoped></style>就好了

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>