Closed pratikpparikh closed 1 year ago
this is an issue for me too. Is there a fix?
Inline component SCSS is not supported at the moment. Will look into see what is needed for this feature soon.
@brandonroberts line 176 in angular-vite-plugin.ts could be enhanced to use vite:css plugin. Below is pseudo code of how to find the plugin, the plugin has transform handle but not sure how to call it. Sorry don't know vite uses the plugin otherwise would have completed the following and submitted the PR.
if (hasStyleUrls(code)) {
const styleUrls = resolveStyleUrls(code, id);
//TODO: add resolution of css pre processing
const cssPlugin = viteServer.config.worker.plugins.find(plugin => {plugin.name == 'vite:css'});
styleUrls.forEach((styleUrl) => {
if (cssPlugin) {
// need to use the plugin and call the transform method on it.
} else {
this.addWatchFile(styleUrl);
}
});
}
Inline component SCSS is not supported at the moment. Will look into see what is needed for this feature soon.
This is not inline scss, this styleUrls that are not working as the current component-resolvers assume that file reference is complied css and does not require preprocessing.
The vite:css plugin is already part of the pipeline. The file watchers are not responsible for the transform themselves. The styles get inlined during compilation, so they would have to be processed before then.
I was trying to help but I think i am clueless in how this works. What you are saying make sense, so I will wait for you to bridge this gap. This kinda blocker for me, so if you can close this as you get time then i would really appreciate it. Overall the plugin is working great for me.
This fix has been included with the 0.2.0-alpha.8
release of the plugin. Thanks!
@brandonroberts thank you. I tested it but the styleUrls are not working, although inline style works fine. It results in following error:
8:16:52 PM [vite] Internal server error: Cannot read properties of null (reading '1')
at Context.
@pratikpparikh I'll take a look. If you have a reproduction or quick example snippet that would help also
@brandonroberts I tested it with your analog-app under apps. Just swap out inline scss style in product-list.component.ts with styleUrls: ['./product-list.component.scss'] and you will be able to reproduce.
Regards, Pratik Parikh
Hmm interesting. There are already other components in the analog-app that use SCSS styleUrls. Thanks
I see what's going on now. Those other ones are CSS styleUrls. I'll get a fix in
thank you
Fixed and released as 0.2.0-alpha.10
Please provide the environment you discovered this bug in.
Analog generated project
Which area/package is the issue in?
vite-plugin-angular
Description
I am having problem processing component level scss. Do you have an example of such?
this seems to be a bug because in plugin you are resolving the css but not processing it if it is a scss before resolving
Please provide the exception or error you saw
No response
Other information
No response
I would be willing to submit a PR to fix this issue