2022-12-26

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



No comments:

Post a Comment