如何在构建VITE应用程序时分配自定义CSS文件名?

Question

是否可以在VITE中构建并使用application-name.css或my-site-name.css?

VITE有一个选项来构建自定义JS文件，但不是自定义CSS或SCSS文件(用于导出)。

https://vitejs.dev/guide/build.html library-mode

VITE Build name:style.css

Answer 1

这是我的vite.config.js自定义CSS文件名:

rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
if (assetInfo.name == 'style.css')
return 'customname.css';
return assetInfo.name;
},
}

Answer 2

这在最新版本中似乎更加健壮。当前的解决方案最初不适合我。

build: {
lib: {
name: 'LIBRARYNAME',
fileName: 'LIBRARYNAME',
},
rollupOptions: {
output: {
assetFileNames: "LIBRARYNAME.[ext]",
},
},
},

这产生:

dist/LIBRARYNAME.css      
dist/LIBRARYNAME.cjs.js  
dist/LIBRARYNAME.cjs.js.map 
dist/LIBRARYNAME.umd.js   
dist/LIBRARYNAME.umd.js.map

如果没有name和filename, JS文件将以默认名称结束。如果没有rollup选项，CSS文件最终为style.css。