目的：在Vite构建的项目中，如何使用普通CSS和CSS预处理器
1、普通CSS的使用
我们在项目的src目录下新建一个styles文件夹，在styles文件夹里新建两个css文件
- index.css
@import url(@/styles/other.css);
.msg {
color: red;
}
- other.css
div {
background-color: blueviolet;
}
然后在index.css中导入other.css，最后在页面中使用。
<script setup>
import "@/styles/index.css"
</script>
<template>
<div class="msg">{{ msg }}</div>
</template>
- 运行看下效果：div的背景颜色和文字的颜色都是我们分别在index.css和other.css里设置的颜色
这里我们要注意，我们在index.css中导入other.css的时候，我们直接使用了@import url(@/styles/other.css)，而不是使用@import url(/src/styles/other.css)，因为我们在配置文件里设置了src的别名alias
这个别名alias在日常项目开发中使用的频率是非常高的，但在Vite中设置别名alias和在webpack中设置别名alias又有点不一样，所以我们这里提出来讲一下。
2、CSS 预处理器的使用
CSS 预处理器，Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要像webpack项目一样，为它们做特殊的配置，在Vite项目里只要安装相应的依赖就可以了，我们这里拿sass举个例子
我们先需要安装sass
npm install --save-dev sass
然后在项目的styles文件夹里新建两个scss文件
image.png
- sass1.css
@import url(@/styles/sass2.scss);
.test1 {
color: white;
}
$font-size-normal: 32px;
- sass2.css
.test1 {
background-color: chocolate;
}
然后在sass1.css中导入sass2.css，最后在页面中使用.
<template>
<p class="test1">测试sass</p>
</template>
<style scoped lang="scss">
@import "@/styles/sass1.scss";
.test1 {
font-size: $font-size-normal;
}
</style>
总结
当然，如果你的项目包含有效的 PostCSS 配置 (任何受 postcss-load-config 支持的格式，例如 postcss.config.js)，它将会自动应用于所有已导入的 CSS。
由于 Vite 的目标仅为现代浏览器，因此Vite的作者也更推荐使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。
网友评论