Vue-CLI中的CSS Module：轻松构建可复用样式组件

CSS Module：模块化样式管理

CSS Module是一种CSS预处理器，它允许你将样式封装在单独的文件中，并为每个文件分配一个唯一的名称空间。这使得你可以创建可复用样式组件，而无需担心与其他样式冲突。CSS Module特别适用于构建大型、复杂的前端项目，因为它可以帮助你保持代码的组织性和可维护性。

在Vue-CLI中使用CSS Module

在Vue-CLI中使用CSS Module非常简单。首先，你需要安装必要的依赖项：

npm install --save-dev css-loader postcss-loader

然后，在你的项目中创建一个新的.vue文件，并在<style>标签中使用lang="css"属性，如下所示：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style lang="css">
.hello-world {
  color: red;
}
</style>

这样，你就可以在你的.vue文件中使用CSS Module了。你可以在<style>标签中使用.module类名来引用当前文件的CSS Module，如下所示：

<template>
  <div>
    <h1 class="hello-world">Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style lang="css">
.hello-world {
  color: red;
}

.module .hello-world {
  font-size: 20px;
}
</style>

这样，你就可以在你的.vue文件中使用CSS Module来为组件定义私有样式了。

使用深度作用选择器实现样式的去私有化

在某些情况下，你可能需要让你的CSS Module样式应用到其他组件中。这可以通过使用深度作用选择器来实现。深度作用选择器允许你穿透组件的边界，并为组件内部的元素应用样式。例如，你可以使用以下代码将.hello-world类名的样式应用到HelloWorld组件内部的所有<h1>元素：

/* Parent component */
<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue';

export default {
  name: 'ParentComponent',
  components: {
    HelloWorld
  }
}
</script>

<style lang="css">
/* This style will be applied to all <h1> elements inside the HelloWorld component */
/deep/ .hello-world {
  color: blue;
}
</style>

/* Child component */
<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style lang="css">
.hello-world {
  color: red;
}
</style>

这样，HelloWorld组件中的<h1>元素就会同时应用.hello-world类名的样式和/deep/ .hello-world样式。

Vue中CSS Module的实现

在Vue中，你还可以使用一种特殊的语法来实现类似CSS Module的功能。这种语法允许你在组件的<template>标签中直接定义样式，如下所示：

<template>
  <div>
    <h1 :class="['hello-world', { large: isLarge }]">Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    isLarge: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classes() {
      return {
        'hello-world': true,
        large: this.isLarge
      };
    }
  }
}
</script>

<style>
.hello-world {
  color: red;
}

.large {
  font-size: 20px;
}
</style>

这种语法的好处在于，它可以让你将样式直接与组件的模板关联起来，从而使代码更加简洁和可维护。

结语

CSS Module是一种强大的工具，它可以帮助你构建可复用样式组件，并保持代码的组织性和可维护性。在Vue-CLI中使用CSS Module非常简单，你只需要安装必要的依赖项并配置你的项目即可。此外，你还可以使用深度作用选择器来实现样式的去私有化，或者使用Vue中CSS Module的实现来实现类似的功能。我希望本文能够帮助你更好地理解CSS Module，并将其应用到你的Vue项目中。