将scss样式抽离成单独文件

本节目标：理解“将scss样式抽离成单独文件”的核心思路，并能把它用于实际开发或面试表达。 在Vue 2中，你可以通过几种方法将单文件组件（Single File Components, SFCs）中的SCSS代码块放到另外的文件中，以便进行更好的样式管理和复用。以下是几种常用的方法：

1. 使用外部SCSS文件

你可以将SCSS代码放在单独的.scss文件中，然后在Vue组件中通过\<style\>标签引入这个文件。

假设你有一个styles.scss文件，你可以这样引入它：

// styles.scss
.body-background {
background-color: #f0f0f0;
}

在你的单文件组件中引入：

<template>
<div class="body-background">
<!-- 组件内容 -->
</div>
</template>

<script>
// JavaScript 部分
</script>

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

2. 使用SCSS变量和Mixins文件

如果你想在多个组件之间共享SCSS变量或mixins，可以创建一个或多个包含变量和mixins的SCSS文件，然后在需要使用它们的组件中通过@import语句引入。

// variables.scss
$primary-color: #3498db;

然后在你的组件SCSS块中引入这个文件：

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

.component-class {
color: $primary-color;
}
</style>

3. 使用webpack配置全局样式

对于一些你希望在多个组件中全局可用的样式，你可以通过配置Vue项目的webpack来实现自动引入。这样，你就不需要在每个组件中手动引入它们了。这在使用Vue CLI或类似构建工具创建的项目中尤其有用。

例如，你可以修改vue.config.js文件，使用sass-loader的additionalData选项自动引入一个全局的SCSS文件：

// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/styles/global.scss";`
}
}
}
};

这段配置会在所有的SCSS块之前自动引入global.scss文件，使得其中定义的变量或mixins在所有组件的SCSS块中都可用。

通过这些方法，你可以有效地组织和管理Vue项目中的SCSS样式，提高代码的可维护性和复用性。