Including css files

[sbaildon]

Hey! Picked up ViewComponent for a new rails project, but I'm unable to get the component to render with css. Reading the docs and tests, I assumed the css is intended to be loaded automagically based on the component name. Does it have to be explicitly imported? This is as both as a sidecar asset and in a sidecar directory.

I started using the latest master, just in case I was on an older version.

gem 'view_component', :git  => "[email protected]:github/view_component.git", :branch => "master"

Creating a new component

rails generate component Example --template-engine erb

/* app/app/components/example_component.css */

div {
	color: red;
}

<%# app/app/components/example_component.html.erb %>

<div>Add Example template here</div>

[jaredcwhite]

@sbaildon You'd still need to import the CSS file in an "index" file somewhere as part of your Webpacker pipeline. The location of the file doesn't automatically include it in the Webpack bundle. Also it wouldn't be scoped in the way you think — that example would make all div tags everywhere red. You can scope by CSS class names, data attributes, or using custom elements/web components (my personal favorite). Happy to supply reference links if you're curious.

[joelhawksley]

@jaredcwhite thanks for following up here! Reading the README, I think we could be more clear about how this doesn't work out of the box. Would you be willing to open a PR to clarify the README? Maybe @sbaildon could review it 😄

[jaredcwhite]

Me and my big mouth. 😄 But yes, I could take another pass at it…one of those things that's non-obvious until after you get the hang of it.

[sbaildon]

Got it—thank you! I thought I was missing a trick with automatic includes.