Vue项目中轻松整合公共SCSS，告别重复编写！

在Vue项目中，为了提高样式的可维护性和复用性，我们经常需要创建公共的SCSS文件。这些公共文件中包含了可以被多个组件复用的样式变量、混合(mixin)、函数等。通过以下步骤，我们可以轻松地将公共SCSS整合到Vue项目中，从而避免重复编写样式代码。

1. 安装依赖

首先，确保你的项目中已经安装了node-sass和sass-loader。如果还没有安装，可以通过以下命令进行安装：

npm install node-sass sass-loader --save-dev

或者使用yarn：

yarn add node-sass sass-loader --dev

2. 配置Webpack

在你的项目根目录下的webpack.config.js文件中，找到module配置项，并添加SCSS加载规则：

module: {
  rules: [
    // ... 其他规则
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  ]
}

确保sass-loader在css-loader之前。

3. 创建公共SCSS文件

在你的项目根目录或src目录下创建一个名为_variables.scss的文件，用于存放全局样式变量。例如：

// src/_variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

接着，创建一个名为_mixins.scss的文件，用于存放全局混合(mixin)。例如：

// src/_mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. 引入公共SCSS文件

在你的主入口文件（如main.js或App.vue）中，引入这些公共SCSS文件：

// main.js 或 App.vue
import './assets/styles/variables.scss';
import './assets/styles/mixins.scss';

或者，如果你使用的是Vue CLI创建的项目，可以在main.js或App.vue中直接使用@import指令：

// main.js 或 App.vue
@import '~assets/styles/variables.scss';
@import '~assets/styles/mixins.scss';

5. 在组件中使用公共SCSS

现在，你可以在任何组件中直接使用这些公共样式变量和混合(mixin)。例如：

<template>
  <div class="container">
    <p class="text-primary">这是主要文本</p>
    <p class="text-secondary">这是次要文本</p>
  </div>
</template>

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

.container {
  @include flex-center;
}
.text-primary {
  color: $primary-color;
}
.text-secondary {
  color: $secondary-color;
}
</style>

通过以上步骤，你就可以轻松地在Vue项目中整合公共SCSS，避免重复编写样式代码，提高项目的可维护性和开发效率。