Imported CSS files do not update on save

[gavinmcfarland]

You might be already aware of this, but when using postcss-import and making changes to files which are imported they do not update on the server after they are saved or after reloading the browser.

<!-- component.html -->
<div class="test"></div>
<style>
    @import `colors.css`; /* .test { color: red } */
    .test {
       color: blue;
    }
</style>

// webpack.config.js
//...
const preprocess = require('svelte-preprocess');
//...
const options = {
    transformers: {
        postcss: {
            plugins: [
                require('postcss-import'),
                require('autoprefixer')({ browsers: 'last 2 versions' })
            ]
       }
    }
}
//...
options: {
    css: true,
    generate: "ssr",
    dev,
    preprocess: preprocess(options)
}

I'm not sure if this is related to svelte-preprocess, svelte-loader, or postcss-import.

Any thoughts?

[kaisermann]

Right now that's not possible because we can't pass external dependencies within the preprocess step. However, there's an issue exactly for that on svelte sveltejs/svelte#1720 😁

[kaisermann]

Implemented on v2.5.0 by #16. We're just waiting svelte-loader to support it as well

[gavinmcfarland]

This will be a very welcomed addition. Thanks

[kaisermann]

@mindthetic Oops, my bad. v2.5.0 will only watch for the direct external files (the ones you import with src="./.../..."). But it's a start for watching imported files as well

[gavinmcfarland]

No worries. At least it could be a work around for now.

[gavinmcfarland]

I thought maybe I could use this as a work around but I'm not sure I understand how to use it the way you mentioned. Do you mean you would be able to do...

<!-- my-component.html -->
<style src="./style.css"></style>

and the browser will reload when styles.css is updated?

[kaisermann]

@mindthetic Yes! But we have to wait for sveltejs/svelte-loader#75 first 😭

[gavinmcfarland]

Ah I see. Cool. Thanks for clarifying.

[eBaeza]

What happens whit this??? I saw that the sveltejs/svelte-loader#75 it´s already merged and released

[kaisermann]

Just added support to watch @imported with postcss-import/postcss-easy-import on v2.7.0 🎉