CODEWITHSUNDEEP
svelte
712Jefferson
712Jefferson

Reputation: 231

Svelte JS - Is it possible to change the global.css build path?

I'm developing for a platform that has very specific folder structure requirements. As a result, the global.css file needs to be in a folder (whether that's the build folder or its own) and not the root folder. Is there a way to edit the rollup.config.js so that the global.css file gets relocated to the directory of my choice when I run "npm run build"?

Upvotes: 1

Views: 807

Answers (1)

rixo
rixo

Reputation: 25001

I assume you're using the Svelte Rollup template.

If so, the global.css is referenced directly in index.html.

index.html

    <link rel='stylesheet' href='/global.css'>

Rollup doesn't see nor process this file.

This means you can move it anywhere you want in the public directory, as long as you keep the URL in the above line in sync.

I advise against putting it somewhere in the public/build directory though, because all the other files in this directory being generated files, this could cause confusion or unnecessary complications.

For example, you can move the file to public/my-dir/global.css, and update the link index.html accordingly:

index.html

    <link rel='stylesheet' href='/my-dir/global.css'>

Another option would be to move the global.css file in the src directory, and import it in your project, for example in main.js:

main.js

import './global.css' // we're importing src/global.css

This way, global.css would get processed by Rollup (thanks to the CSS plugin in the config), and its content will end up in the bundle.css file of the build.

Upvotes: 3

Related Questions