携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

前言

• vite 原生支持 css 语法，导入.css 文件将会把内容插入到 <style> 标签中，同时也带有 HMR 支持。也能够以字符串的形式检索处理后的、作为其模块默认导出的 CSS。
• 如果我们需要使用变量，推荐使用原生 css variable

postcss

• 如果项目包含有效的 PostCSS 配置 (任何受 postcss-load-config 支持的格式，例如 postcss.config.js)，它将会自动应用于所有已导入的 CSS。
• 比如我们想在css中执行console.log打印在控制台上(目前还没发现有什么用途)
• 安装依赖

yarn add @postcss-plugins/console -D

• 在根目录配置 postcss.config.js

yarn add @postcss-plugins/console -D

• css中添加如下代码

.root {
  @console.error hello roots
  color: var(--main-bg-color);
}

• 运行项目，我们可以在终端查看结果，这个插件会帮助我们输出log下一行的css代码。

@import alias

• 如果想让css 导入支持别名的方式，我们需要在 vite.config.js 中配置别名

resolve: {
    alias: {
      "@": "/src",
      "@styles": "/src/styles",
    },
  },

• css 中使用 @import，就可以使用别名了

@import url("@styles/other.css");

css-modules

• 任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件，这种方式可以方便我们将css作为一个模块进行使用
• 创建 test.module.css 文件

.moduleClass {
  color: yellow;
}

• 在 App.jsx 使用

import classes from "@/styles/test.module.css"

export default defineComponent({
  setup(){
    return () =>{
      return <div class={`root ${classes.moduleClass}`} >Hello vue3 jsx</div>
    }
  }
})

• CSS modules 行为可以通过 css.modules选项 进行配置。

css pre-processors

Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持

• 安装

# .scss and .sass
yarn add -D sass

• 创建 test.scss

$bgColor: blue;

.root {
  background-color: $bgColor;
}

.bg {
  height: 200px;
  width: 200px;
  background: url("@/assets/logo.png");
}

• 使用

import '@/styles/test.scss'

• 如果使用的是单文件组件，可以通过 （或其他预处理器）自动开启。

禁用 CSS 注入页面

如果我们不想让引入的css注入到页面，vite也是可以处理的，在路径后面添加?inline参数

import styles from './foo.css' // 样式将会注入页面
import otherStyles from './bar.css?inline' // 样式不会注入页面

总结

这一节，我们学习了css功能在vite中是如何使用的，包括postcss、@import、css-modules、process，丰富了我们在项目中css的使用方法