.vue文件中style标签的几个标识符
在人生就要绝望的时候, 被编辑器所提示的一个
scopedSlots所拯救.卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法.
问题背景
问题由来
项目中使用了elementUI框架, 与.vue文件.
现状: <template>中使用$style:[类名], <style module>进行了样式的绑定.
个人认为使用$style这种方式的绑定, 写起来很麻烦.
不仅仅是麻烦更重要的是, 没有办法直接影响和修改element中的样式.
<template>
<span :class="$style.text">
...
</span>
</template>
<style module>
.text {}
</style>陷入点
不知道清楚再style中使用了
module这个属性的具体含义dev启动环境下, 使用
scoped形成独立作用域后, 并不能影响到elemnt中组件的样式.使用
scopedSlots标识style标签后, 解决问题. 但出现 dev环境正常, 部署后, 不起作用问题详解
认识
.vue的
<style>标签这应该是关系到,
这个webpack的插件vue-loader
vue-laoder会解析组件, 提取语言块. 在需要的时候, 经过其他的loader处理, 最后组装成一个commonjs模块.其实就是
export default出来一个对象 然后呢, 上面的
<template>, 挂载在
这个对象的template属性上之前, 直接import引近来一些样式文件也是可行的, 但当时并未思考这些标识如何实现.
<style>可以有module和scoped属性, 来将样式封装到组件中. 具有不同封装模式的多个
<style>标签, 可以在一个组件中混合使用默认情况下,
style-loader会提取内容, 并通过
<style>标签, 加入到文档的
<head>中. 也可以通过配置webpack形成单个.css文件.
$style配合
<module>如何工作参考: https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html
