@import of css from svelte component in node_modules

[TheRealThor]

I am using module (filepond-svelte) that imports css itself from another node_module (filepond) with the directive

<style global> @import '/filepond/dist/filepond.min.css'; </style>

When I am using hot reload development option, this is being added to the DOM

<style id="svelte-1x6jndj-style">
@import '/filepond/dist/filepond.min.css';
</style>

This import cannot be reached by the browser (404), since it is served from 'public' and not from 'node_modules'.
How can I configure svelte-loader to inline the content of the css file that is should be imported?

[non25]

Install postcss, postcss-import, postcss-load-config.

Configure svelte-preprocess:

...
              preprocess: sveltePreprocess({
                postcss: true
              }),
...

Create postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-import')
  ]
}

[non25]

@TheRealThor did that help ?

[TheRealThor]

@non25 Hey, yes that did work. I actually played with postcss-import before but I must have made a mistake. Thanks for you help!