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

Question

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

• 一个包含打包后js代码的文件
• 一个包含打包后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模板会生成配置文件，在此文件中JavaScript和CSS会被打包成一个单独的文件，并在运行时注入CSS。

- Daniel

---

嗨@Daniel，你可以使用rollup-plugin-css-only npm包。 - Jagroop

Answer 1

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

来自Vite文档：

如果您更喜欢将所有CSS提取到单个文件中，可以通过将build.cssCodeSplit设置为false来禁用CSS代码拆分。

- NotWoods