Vue 局部作用域 CSS 解决方案：使用 CSS 预处理器

在 Vue 中，可以使用 scoped 属性来将样式作用于当前组件的范围内。但是，在引入外部 CSS 文件时，scoped 属性无法生效，因为引入的外部 CSS 文件是全局的。

为了解决这个问题，可以使用 CSS 预处理器（如 Sass、Less 等）的功能来实现局部作用域的 CSS。具体步骤如下：

安装 CSS 预处理器相关的依赖包，如 node-sass 和 sass-loader。
在组件的 <style> 标签中，使用 lang 属性来指定使用的 CSS 预处理器，如 lang="scss"。
在组件的 <style> 标签中，使用 @import 语句来引入外部 CSS 文件，如 @import './styles/main.scss';。
在外部 CSS 文件中，使用 CSS 预处理器的局部作用域功能来定义样式，如 Sass 中的 & 选择器。

例如，以下是一个使用 Sass 实现局部作用域的例子：

<template>
  <div class="example">
    <h1>Hello World</h1>
  </div>
</template>

<style lang="scss">
  @import './styles/main.scss';

  .example {
    h1 {
      font-size: 24px;
      color: $primary-color;
    }
  }
</style>

在 ./styles/main.scss 文件中定义了 $primary-color 变量：

$primary-color: #007bff;

.example {
  h1 {
    font-weight: bold;

    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background-color: $primary-color;
      margin-top: 10px;
    }
  }
}

这样，$primary-color 变量和 .example 选择器中的样式就只会作用于当前组件的范围内，实现了局部作用域的效果。