如何在Vite中将css提取为单独的.css文件？

Question

在 webpack 中，可以通过以下方式生成输出：

• 1 个包含 js 代码的文件
• 1 个带有捆绑 CSS 的文件

这是 webpack 配置的一部分，会产生这样的输出：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

...

plugins: [
  new MiniCssExtractPlugin({
    filename: 'assets/css/styles.css',
    chunkFilename: '[id].css',
  }),
  ...
],

...

{
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
    },
  ],
},

...

如何用vite实现这一点？

vite 模板默认生成配置，其中 js 和 css 捆绑到单个文件中，并在运行时注入 css。

Answer 1

您可以使用该选项build.cssCodeSplit来关闭运行时 CSS 注入。

来自Vite 文档：

如果您希望将所有 CSS 提取到一个文件中，则可以通过设置build.cssCodeSplit为 来禁用 CSS 代码分割false。