Vue引入外部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选择器中的样式就只会作用于当前组件的范围内，实现了局部作用域的效果