.vue文件 加scoped 样式不起作用的解决方法

“vue文件加scoped样式不起作用”主要是由于 scoped 属性会为样式选择器添加一个随机的类名来避免样式污染，导致选择器无法正确匹配。下面我将提供两种解决方法。

方法一：使用 /deep/ 或 ::v-deep

由于 vue-loader 会将 scoped 的样式编译成类似于 vue 虚拟 DOM 的选择器，因此使用 /deep/ 或 ::v-deep 可以穿透 scoped 选择器，使得样式可以应用到子组件中。

示例一

下面假设我们有一个父组件 Parent.vue，和一个子组件 Child.vue。在 Parent.vue 中，我们定义了一个 scoped 样式，并希望该样式可以作用到子组件 Child.vue 上。我们可以在 scoped 样式中使用 /deep/ 或 ::v-deep 来实现：

<!-- Parent.vue -->

<template>
  <div class="parent">
    <Child />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  name: 'Parent',
  components: {
    Child,
  },
};
</script>

<style scoped>
.parent /deep/ .child {
  color: red;
}
</style>

<!-- Child.vue -->

<template>
  <div class="child">Child Component</div>
</template>

<script>
export default {
  name: 'Child',
};
</script>

<style scoped>
/* no styles defined */
</style>

这样，我们就可以将 scoped 样式中的 .parent /deep/ .child 选择器应用到 Child 组件中。

示例二

假设我们现在需要通过 scoped 样式来修改 element-ui 组件的样式。我们首先需要引入 element-ui 的样式：

// main.js

import 'element-ui/lib/theme-chalk/index.css';

然后在样式中使用 /deep/ 来穿透 scoped，例如：

<!-- MyComponent.vue -->

<template>
  <el-button>Test Button</el-button>
</template>

<style scoped>
/* css code for MyComponent.vue*/

/deep/ .el-button {
  background-color: red;
  color: white;
}
</style>

这样，我们就可以让 scoped 样式生效，修改 element-ui 组件的样式了。

方法二：使用 CSS Modules 解决

另一种方法是使用 CSS Modules 来处理 scoped 样式。CSS Modules 是一个 css 模块化的方案，能够让我们为每个组件单独创建一个 css 作用域，使得 scoped 的问题得以解决。

示例一

首先，我们需要安装相关依赖：

npm i node-sass sass-loader css-loader --save-dev # 安装相关 loader，用于处理 css modules

然后在 vue.config.js 中配置 cssModules，开启 CSS Modules 功能：

// vue.config.js

module.exports = {
  css: {
    modules: true,
  },
};

在我们的组件中，我们可以定义一个局部 style，比如：

<!-- MyComponent.vue -->

<template>
  <div class="my-component">My Component</div>
</template>

<style module>
/* css code for local styles */

.my-component {
  color: red;
}
</style>

这样，所有的样式都会被转换成唯一的类名，防止样式污染。我们可以在组件中使用新生成的类名，从而解决 scoped 样式覆盖不到子组件的问题。

示例二

在使用 CSS Modules 的过程中，可以给我们带来更加简洁和优雅的代码：

<!-- MyComponent.vue -->

<template>
  <div :class="$style.myComponent">My Component</div>
</template>

<style module>
/* css code for local styles */

.myComponent {
  color: red;
}
</style>

这样，我们就可以通过 $style 来应用模块化的样式。在上面的例子中，$style 的值是一个对象，包含了当前组件中所有 CSS Modules 中定义的样式名。

总之，CSS Modules 并不能替代 scoped 属性，因为 scoped 属性可以避免全局污染，而 CSS Modules 可以避免局部污染。选择使用哪种方案，取决于具体的需求和项目背景。