Vite 的 CSS Module 的秘密武器：用 CSS 按需加载与自定义路径

什么是 CSS Module

CSS Module 是一种 CSS 预处理器的技术，允许你为每个 CSS 类生成一个唯一的类名，从而避免样式冲突。这使得你可以更轻松地组织和管理你的 CSS 代码，并避免在多个组件之间共享样式。

Vite 中的 CSS Module

Vite 内置支持 CSS Module，这意味着你可以开箱即用地使用它。你只需要在你的 CSS 文件中使用 .module.css 扩展名，Vite 就会自动将你的 CSS 转换为 CSS Module。

自定义路径

默认情况下，Vite 将你的 CSS Module 放在一个名为 .vite 的目录中。但是，你也可以使用自定义路径来存储你的 CSS Module。这可以让你更好地组织你的项目，并使你的 CSS 文件更容易找到。

要在 Vite 中使用自定义路径，你需要在你的 vite.config.js 文件中进行配置。你可以在 css 选项中指定你的自定义路径。例如：

export default defineConfig({
  css: {
    modules: {
      generateScopedName: '[name]_[local]_[hash:base64:5]',
      customProperties: true,
      localsConvention: 'dashesOnly',
    },
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        rollupReplace({
          // ...
        }),
      ],
    },
  },
})

CSS 按需加载

Vite 还支持 CSS 按需加载。这是一种将 CSS 文件仅在需要时加载的技术，从而可以提高你的网站的性能。要使用 CSS 按需加载，你需要在你的 vite.config.js 文件中进行配置。你可以在 build 选项中启用 CSS 按需加载。例如：

export default defineConfig({
  build: {
    cssCodeSplit: true,
  },
})

使用 CSS 预处理器

你还可以使用 CSS 预处理器（如 Less、Sass 和 Stylus）来编写你的 CSS Module。要使用 CSS 预处理器，你需要在你的 vite.config.js 文件中进行配置。你可以在 css 选项中指定你的 CSS 预处理器。例如：

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
})

结语

在本文中，我们探讨了如何在 Vite 中使用 CSS Module 的同时支持自定义路径，从而获得更好的开发体验和性能优化。我们还介绍了如何使用 Vite 插件和 Vite 配置来实现这一目标，并讨论了使用 CSS 预处理器（如 Less、Sass 和 Stylus）时需要注意的事项。最后，我们提供了一些有用的建议和技巧，帮助你充分利用 Vite 的强大功能。