单个Vue组件中scoped样式不生效问题排查求助

问题排查及解决方案 #

1. 修复Twig模板多余闭合标签 #

你提供的index.html.twig模板里存在多余的</div>标签，会导致页面DOM结构异常，可能影响Vue样式作用域匹配，先删除该多余标签：

{% extends 'base.html.twig' %}

{% block body %}
    <div id="app">
         <div class="text-center">
            <h3 class="pb-3">Hang your words here</h3>
            <example></example>
       </div>
   </div>
   <!-- 删除这里多余的</div> -->
{% endblock %}

2. 验证Webpack Encore的VueLoader配置 #

Symfony项目中Vue scoped样式依赖VueLoader的正确编译，打开webpack.config.js确认已开启VueLoader，且没有禁用scoped样式的配置：

// 确保存在这行配置，且没有传入scoped: false参数
Encore.enableVueLoader();

配置修改后重新执行yarn dev或者npm run dev编译项目。

3. 类名一致性校验 #

你贴出的全局样式中使用的是中划线命名的.vue-input，而组件模板、scoped样式中使用的是下划线命名的.vue_input，如果实际使用中存在类名不匹配的情况，先统一类名命名规则。

4. 浏览器端规则校验 #

打开浏览器开发者工具的元素面板，选中.vue_input节点做如下检查：

• 节点上是否存在data-v-xxxxxx格式的属性（scoped样式的唯一标识）
• 样式面板是否存在带[data-v-xxxxxx]后缀的.vue_input规则
  • 无该规则：说明VueLoader未正确编译scoped样式，回到第二步检查配置，确认没有其他Loader拦截scoped样式编译
  • 有规则但被划掉：说明存在更高优先级的样式覆盖，可提升scoped样式权重解决：

    <style scoped>
    .vue_input.col-6 {
        display: flex;
        justify-content: space-between;
    }
    </style>
    

5. 挂载逻辑校验 #

打开Vue入口JS文件（你配置的app/vue入口），确认组件注册、挂载逻辑正确，没有多Vue实例冲突的问题：

import Vue from 'vue'
import Example from './components/Example.vue'

new Vue({
  el: '#app',
  components: { Example }
})

内容的提问来源于stack exchange，提问作者MoDzeus