Vue.js – 将CSS（SCSS）与单个*.vue文件分离

在本文中，我们将介绍如何在Vue.js中将CSS（SCSS）从单个*.vue文件中分离出来。Vue.js是一种流行的JavaScript框架，用于构建用户界面。它提供了一种特殊的方式来组织、管理和构建Web应用程序，其中包括将HTML、CSS和JavaScript组织到单个组件中。这种单文件组件的结构使得开发与维护变得更加容易。然而，有时候我们可能需要将CSS代码从组件中分离出来，以提高可维护性和复用性。

阅读更多：Vue.js 教程

方法一：使用单独的CSS文件

最简单的方法是将CSS代码提取到一个单独的文件中，并使用标签将其连接到Vue组件中。这种方法与传统的方式相似，将CSS与HTML分开存储。首先，我们创建一个名为”style.css”的新文件，并将所有CSS代码都复制到这个文件中。然后，在我们的Vue组件中，使用标签引用这个CSS文件。

示例：

<!-- MyComponent.vue -->
<template>
  <div class="my-component">
    <!-- component code here -->
  </div>
</template>

<script>
export default {
  // component logic here
}
</script>

<link rel="stylesheet" href="style.css">

这样，我们就将CSS代码与Vue组件分离开来，使得代码更加模块化和可维护。

方法二：使用Vue的样式模块

Vue提供了一个内置功能，可以轻松地将CSS代码与Vue组件进行关联，而无需将其分离到单独的文件中。这个功能称为“样式模块”，可以使用特殊的<style module>标签在Vue组件中定义CSS代码。

示例：

<!-- MyComponent.vue -->
<template>
  <div :class="$style.myComponent">
    <!-- component code here -->
  </div>
</template>

<script>
export default {
  // component logic here
}
</script>

<style module>
.myComponent {
  /* component specific styles here */
}
</style>

在这个示例中，我们使用了:class="$style.myComponent"绑定样式到Vue组件的根元素上。而在style标签中，我们使用.myComponent来定义Vue组件的样式。在使用样式模块时，Vue会为每个组件生成一个唯一的类名，以确保样式作用域在组件范围内。这样的好处是组件之间的样式不会相互干扰，并且可以实现更强的样式复用。

方法三：使用CSS预处理器

在上述的方法中，我们仍然需要在Vue组件中直接编写CSS代码。然而，在大型项目中，通常会使用CSS预处理器，如SCSS或Less，来帮助我们更好地组织和维护CSS代码。幸运的是，Vue也允许我们在单文件组件中使用CSS预处理器。

首先，我们需要在项目中安装所需的CSS预处理器，并确保构建工具已配置正确。对于SCSS来说，我们需要安装node-sass和sass-loader这两个依赖项。

然后，在Vue组件的style标签中，我们可以直接编写SCSS代码：

<!-- MyComponent.vue -->
<template>
  <div class="my-component">
    <!-- component code here -->
  </div>
</template>

<script>
export default {
  // component logic here
}
</script>

<style lang="scss">
myColor: #ff0000;

.my-component {
  color:myColor;
}
</style>