CSS changes within HTML Imports ignored

chrisfay commented 8 years ago

Issue details

I'm using browsersync + grunt-contrib-watch using the instructions here https://www.browsersync.io/docs/grunt/. Will browsersync work with css that is included within an HTML import? I'm including css within an HTML import and browsersync ignores any changes within those css files, but works fine on css NOT included within an import. This is an architectural requirement for a unique project I'm working on, so simply rerouting the compiled css to a file outside the import isn't an option.

e.g.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

<link rel="stylesheet" href="styles.css">

<link rel="import" href="import.html">
</head> <body>

</body> </html>

Steps to reproduce/test case

Include css file within an HTML import
Configure grunt-contrib-watch with browsersync
Change css in html import so that grunt watch task fires
Updated css not injected into page
Please specify which version of Browsersync, node and npm you're running
Browsersync [ 2.11.2 ]
Node [0.12.4 ]
Npm [ 2.10.1 ]
Affected platforms
[ ] linux
[ ] windows
[x] OS X
[ ] freebsd
[ ] solaris
[ ] other (please specify which)
Browsersync use-case
[ ] API
[ ] Gulp
[x] Grunt
[ ] CLI
If CLI, please paste the entire command below

{cli command here}

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

NA

shakyShane commented 8 years ago

Do you mean your css is embedded inline in the import?

chrisfay commented 8 years ago

No, not inline. The html import links to a stylesheet.

shakyShane commented 8 years ago

ok, well either way if the element you want reloading is not on the same page as the Browsersync JS file, then I don't think this will be possible

chrisfay commented 8 years ago

Bummer :(

shakyShane commented 8 years ago

@chrisfay I'm just not sure if the current page has access to resources loaded within an import - I have no experience in this area. If anyone else does, please enlighten us :)

chrisfay commented 8 years ago

I just tried this with CodeKit and it worked as expected, where changes to css linked from inside an html import were properly live-reloaded in the main html page, so I know it's technically possible.

tj commented 7 years ago

Same with css imports apparently, forcing a reload would be fine no? vs injecting

BrowserSync / browser-sync