【Vite】vite.config.js 中的 CSS 配置详解

Vite 是一个新一代前端构建工具，具有极快的冷启动速度和优秀的热更新体验。本文将详细介绍如何在 vite.config.js 中进行 CSS 的相关配置，帮助你更好地掌控样式的加载与处理。通过配置，你可以定制 CSS 的加载方式、模块化处理以及与预处理器的集成。

一、Vite 中 CSS 的基础配置

1. CSS 配置概述

在 Vite 项目中，CSS 的加载与处理是默认支持的。Vite 支持 PostCSS、Sass、Less 等预处理器，并且自动将 .css 文件模块化处理。同时，你也可以通过配置来定制更复杂的需求，例如 CSS 的自动导入、样式变量的全局定义等。

Vite 的 CSS 配置主要在 vite.config.js 文件中进行，具体的 CSS 配置项都放置在 css 对象中。

2. Vite 的默认行为

Vite 默认支持以下特性：

• 模块化：所有 CSS 文件默认会进行 CSS 模块化处理。
• 自动添加浏览器前缀：Vite 会根据 PostCSS 的 Autoprefixer 插件为你的 CSS 自动添加浏览器前缀。
• 预处理器支持：Vite 自动支持常见的 CSS 预处理器如 Sass、Less 和 Stylus。

二、CSS 配置项详解

在 Vite 中，你可以通过 vite.config.js 文件的 css 选项来定制 CSS 相关的行为。下面我们会详细介绍每个配置项及其用途。

1. preprocessorOptions

preprocessorOptions 允许你为 CSS 预处理器提供全局的配置选项，例如全局变量的定义、混入（mixins）的使用等。常见的预处理器如 Sass 和 Less 都支持在此配置。

示例代码：

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      },
      less: {
        modifyVars: {
          'primary-color': '#1DA57A',
        },
        javascriptEnabled: true
      }
    }
  }
}

• scss.additionalData：允许你在每个 .scss 文件的开头自动注入一些全局的样式变量或混入。
• less.modifyVars：用于修改 Less 的变量，在这里我们修改了 primary-color 的值为 #1DA57A。

2. modules

modules 配置用于控制 CSS 模块化处理的行为。CSS 模块化是指每个 .css 文件中的类名和动画名称都会被哈希化，避免全局冲突。在 Vite 中，CSS 模块化是默认开启的。

你可以通过 modules 来自定义模块化处理的规则：

export default {
  css: {
    modules: {
      scopeBehaviour: 'local',
      globalModulePaths: [/global\.css$/],
      generateScopedName: '[name]__[local]___[hash:base64:5]',
    }
  }
}

• scopeBehaviour：决定 CSS 是默认作用于局部还是全局。可选值为 local（局部，默认值）和 global（全局）。
• globalModulePaths：可以通过正则表达式指定哪些文件不参与模块化处理。
• generateScopedName：定义生成类名的规则。默认情况下是 [hash:base64]，你可以自定义为更易读的格式，例如 [name]__[local]___[hash:base64:5]。

3. postcss

postcss 选项允许你为 Vite 提供 PostCSS 配置。在 Vite 中，PostCSS 的配置通常放在根目录下的 postcss.config.js 文件中，但你也可以直接在 vite.config.js 中进行配置。

示例代码：

export default {
  css: {
    postcss: {
      plugins: [
        require('autoprefixer'),
        require('postcss-nested')
      ]
    }
  }
}

• plugins：PostCSS 的插件数组，在这里我们使用了 autoprefixer 插件为 CSS 添加浏览器前缀，以及 postcss-nested 插件支持嵌套规则的写法。

三、CSS 预处理器的配置

Vite 支持多种 CSS 预处理器，例如 Sass、Less 和 Stylus。你可以通过 preprocessorOptions 来为这些预处理器提供配置。

1. 配置 Sass

Sass 是目前最流行的 CSS 预处理器之一。通过 Vite，使用 Sass 变得非常简单。你只需安装 sass 包即可直接在项目中使用 .scss 文件。

示例配置：

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

通过 additionalData，我们可以将全局变量或混入直接引入到每个 .scss 文件中，而不需要每次手动引入。

2. 配置 Less

Less 是另一种常见的 CSS 预处理器，广泛用于 Ant Design 等前端 UI 框架中。使用 Less 时，你可以在 preprocessorOptions 中定义全局的变量和修改项。

示例配置：

export default {
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#ff0000'
        }
      }
    }
  }
}

在这个例子中，我们启用了 Less 的 javascriptEnabled 选项，并修改了全局的 primary-color 变量。

3. 配置 Stylus

Stylus 是一款灵活的 CSS 预处理器，支持极简的语法风格。你可以像配置 Sass 和 Less 一样，在 Vite 中为 Stylus 提供全局配置。

示例配置：

export default {
  css: {
    preprocessorOptions: {
      styl: {
        import: ['~@/styles/variables.styl']
      }
    }
  }
}

在这个配置中，我们全局导入了 Stylus 变量文件，使得这些变量可以在项目中的任何 .styl 文件中直接使用。

四、CSS 代码分割

Vite 默认支持 CSS 代码分割，意味着当你使用动态导入（dynamic import）时，Vite 会自动将相应的 CSS 也分割到单独的文件中。这样可以有效减少初始加载时间，提高性能。

1. 动态导入中的 CSS 处理

当你在项目中使用动态导入时，Vite 会自动将相关的 CSS 提取到一个独立的文件中。例如：

import('./MyComponent.vue');

在这个例子中，Vite 会将 MyComponent.vue 中的 CSS 提取到一个单独的 .css 文件中，并在组件加载时动态加载这个 CSS 文件。

2. 禁用 CSS 代码分割

如果你不希望 Vite 对 CSS 进行分割，你可以通过以下配置来禁用 CSS 代码分割：

export default {
  build: {
    cssCodeSplit: false
  }
}

在这个配置中，我们设置 cssCodeSplit: false，这样所有的 CSS 都会被打包到一个文件中。

五、CSS 的压缩与优化

在生产环境中，Vite 会自动对 CSS 进行压缩，以减小文件体积，提高加载速度。你可以通过 minify 选项来自定义压缩行为。

1. 自定义 CSS 压缩

Vite 使用 esbuild 作为默认的 CSS 压缩工具，你可以通过 build.minify 来选择压缩工具：

export default {
  build: {
    minify: 'esbuild'
  }
}

你还可以通过配置 css.minify 来更细粒度地控制 CSS 的压缩行为。

六、总结

Vite 提供了强大的 CSS 配置功能，使得开发者可以根据项目需求灵活地处理 CSS。无论是全局变量的定义、CSS 模块化处理，还是预处理器的支持与配置，Vite 都能很好地满足前端开发中的各种需求。通过本文的介绍，相信你已经对 Vite 中的 CSS 配置有了更深入的了解，并能够在实际项目中灵活应用这些配置，从而提升开发效率与项目性能。

推荐：

• JavaScript
• react
• vue

---