Svelte uses Rollup for bundling. This is the folder structure.
svelte/
├── node_modules/
├── public/
│ ├── bundle.js
│ └── bundle.css
├── src/
│ ├── App.svelte
│ └── main.js
└── rollup.config.js
I want to save both the bundle.js
and bundle.css
outside the root folder.
Here's the rollup config.
input: "src/main.js",
output: {
format: "cjs",
name: "app",
file: "../../src/svelte/bundle.js",
},
plugins: [
svelte({
css: (css) => {
css.write("/bundle.css");
},
}),
],
I can save the bundle.js
fine, but the path passed to css.write()
for bundle.css
is relative to the bundle.js
destination directory.
If I try to do css.write("../bundle.css")
, I get this error...
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".
Here some snippets to make it happen:
...
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',
}),
...
],
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.