Vue中的作用域CSS和CSS模块的区别资源-CSDN下载

177 浏览量 2020-12-03 09:04:15 上传评论收藏 682KB PDF 举报

资源推荐

资源详情

资源评论

Vue中的作用域中的作用域CSS和和CSS模块的区别模块的区别

现代Web开发中的CSS离完美还差得远，这并不奇怪。现在，项目通常是相当的复杂的，而CSS样式又是全局性的，所以到

最后总是极容易地发生样式冲突：样式相互覆盖样式相互覆盖或隐式地级联到我们未考虑到的元素隐式地级联到我们未考虑到的元素。

为了减轻CSS存在的主要痛点，我们在项目中普遍采用 BEM 的方法来。不过这只能解决CSS问题中的一小部分。

对我们来说是幸运的，社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过 CSS Modules 、

Styled Componetns 、 Glamorous 或 JSS 。这些只是我们今天可以添加到项目中的一些最流行的工具。如果你对这个话题感

兴趣，你可以查看这篇文章： @Indrek Lasn 详细介绍了 CSS in JS的全部思想。

使用Vue-cli构建的Vue应用程序提供了两个很棒的内置解决方案：作用域CSS 和 CSS Modules 。它们都有一些优点和缺点，

所以让我们仔细看看哪种解决方案更适合你。

作用域作用域CSS

在Vue中引入了CSS作用域 scoped 这个概念， scoped 的设计思想就是让当前组件的样式不会影响到其他地方的样式，编译

出来的选择器将会带上 data-v-hash 的方式来应用到对应的组件中，这样一来，CSS也不需要添加额外的选择器。也将解决

CSS中选择器作用域和选择器权重的问题。

在Vue中，为了让作用域样式工作，只需要在 <style> 标签添加 scoped 属性：

<template>

<button class="btn">

<slot></slot>

</button>

</template>

<style scoped>

.btn {

color: red;

}

</style>

通过使用PostCSS并将上面的示例转换为以下内容，它仅将我们的样式应用于相同的组件中的元素：

就像你看到的一样，整个过程不需要做什么就可以达到很好的效果：作用域样式（CSS中一直以来令人头痛的问题之一）。

现在假设你需要调整 Button 组件的宽度，你可以像平常使用一样，在调用这个组件的地方添加一个额外的 class 来设置其样

式：

<template>

<div id="app">

<Button class="btn-lg">click</Button>

</div>

</template>

<script>

import Button from "./components/Button";

export default {

name: "App",

components: {

Button

}

};

</script>

<style scoped>

.btn-lg {

padding: 10px 30px;

}

剩余9页未读，继续阅读

内容反馈

weixin_38590685

粉丝: 3

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip