rollup-如何在JS目标文件夹之外编写CSS

Question

Svelte使用Rollup进行绑定。这是文件夹结构。

svelte/
├── node_modules/
├── public/
│   ├── bundle.js
│   └── bundle.css
├── src/
│   ├── App.svelte
│   └── main.js
└── rollup.config.js

我想将bundle.js和bundle.css都保存在根文件夹之外。

这是汇总配置。

input: "src/main.js",
output: {
format: "cjs",
name: "app",
file: "../../src/svelte/bundle.js",
},
plugins: [
svelte({
css: (css) => {
css.write("/bundle.css");
},
}),
],

我可以保存bundle.js，但传递给bundle.css的css.write()的路径是相对于bundle.js目标目录的。

如果我尝试执行css.write("../bundle.css")，则会出现此错误。。。

Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute 
nor relative paths and do not contain invalid characters, received "/bundle-svelte-activities.css".

Answer 1

这里有一些实现它的片段：

...
import css from 'rollup-plugin-css-asset';
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
assetFileNames: 'bundle.css',
dir: 'public/build',
entryFileNames: 'bundle.js'
},
plugins: [
svelte({
...
emitCss: true,
}),
...
css({   
name: 'bundle',
}),
...
],
...