svelte rollup-plugin-css-only import not working
In a svelte project, I want to import some css files, and I cant make this plugin works : https://github.com/thgh/rollup-plugin-css-only
here is my config
project/rollup.config.js
/* other imports */
import css from 'rollup-plugin-css-only';
export default {
plugins: [
/* svelte here, */
css({ output: 'public/build/extra.css' }),
/*
alternatives I tried :
css(),
css({ output: 'extra.css' }),
css({ output: 'bundle.css' }),
css({ output: 'public/build/bundle.css' }),
*/
]
};
I put intentionally the output in a separate file project/public/build/extra.css
instead of the default project/public/build/bundle.css
to see if the file will be created; and the file is never created
I searched with find . -type f -name "*extra.css"
in the project root directory
the output file is included inside the project/public/index.html
:
<link rel='stylesheet' href='/build/extra.css'>
and that gives me a log with error 404, which is normal if it was not created
I tried different ways to import :
project/src/component/exemple.css
inside the component :
project/src/component/exemple.svelte
<script>
import './my_style.css';
</script>
<style>
@import './my_style.css';
</style>
<style src='./my_style.css'>
</style>
the plugin is present in the package.json, and I did npm install --save-dev rollup-plugin-css-only
Comments
Post a Comment