search

sveltejs / svelte-loader

Webpack loader for svelte components.
MIT License
597 stars 72 forks source link

@import of css from svelte component in node_modules #167

Closed TheRealThor closed 3 years ago

TheRealThor commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@TheRealThor did that help ?

TheRealThor commented 3 years ago

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