Vue全局SCSS

在Vue项目中，使用全局SCSS可以实现大量的样式复用和代码共享，从而提高开发效率。与局部SCSS不同，全局SCSS可以被整个项目的vue文件所共享。

集成SCSS

要使用SCSS文件，需要先集成SCSS编译器。最常用的编译器是node-sass和sass-loader。这些编译器可以将SCSS文件编译为CSS文件，然后在Vue应用程序中使用。

安装

在Vue应用程序中使用全局SCSS之前，必须安装相应的软件包。

Node-sass：

npm install node-sass --save-dev

Sass-loader：

npm install sass-loader --save-dev

配置

在Vue项目配置文件vue.config.js中，需要添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/variables.scss";`  // 引入全局变量
      }
    }
  }
}

这将告诉vue-cli使用Sass编译器来编译.scss文件。prependData选项用于引入全局SCSS变量和混合器。此选项指定用于所有SCSS文件的公共SCSS代码。

引入全局SCSS文件

在Vue项目中，可以通过引入SCSS文件的方式使用全局SCSS。一般来说，全局SCSS文件位于/src/assets/scss目录中。例如，下面是一个简单的全局SCSS文件variables.scss：

$primary-color: #0078FF;
$secondary-color: #FFA500;
$danger-color: #FF1352;

使用@import指令引入该文件：

<style lang="scss">
  @import '@/assets/scss/variables.scss';

  .primary-button {
    background-color: $primary-color;
  }

  .secondary-button {
    background-color: $secondary-color;
  }

  .danger-button {
    background-color: $danger-color;
  }
</style>

以上示例展示如何定义和使用变量。引入全局SCSS文件后，这些变量可以在该文件内部和其他组件中使用。同样，可以在不同的组件中使用这些变量定义的相同样式。