vite2.0项目的导入css方式探索(二)

在vite单文件页面组件里面，我们导入css样式的时候，注意以下区别:

1.scoped

<template>
  <div class="content-test">
    <p class="content-test-p">{{ name }} -- {{ user.age }}</p>
    <button @click="handleClick">click</button>
  </div>
</template>

<style lang="css">
.content-test-p {
  background: #ddd;
}

这样导入的是全局样式,无module化

加上scoped

<style lang="css" scoped>  //这里必须加上scoped才是模块化css
@import "./test.modules.css";
.content-test-p {
  background: #ddd;
}
</style>

2.除了上面这种模块化导入css文件，我们还可以下面这样导入

<script setup>
import { reactive, defineEmits, getCurrentInstance, defineExpose } from "vue";
import classes from "./test.modules.css";

注释掉 style里面的css导入和scoped属性

<style lang="css">
/* @import "./test.modules.css"; */
.content-test-p {
  background: #ddd;
}
</style>

3.要识别scss/less/stylus,只需cnpm install -D sass/less/stylus即可