diff --git a/lib/action_view/component/base.rb b/lib/action_view/component/base.rb
index 2eccca1c5..cdb785e47 100644
--- a/lib/action_view/component/base.rb
+++ b/lib/action_view/component/base.rb
@@ -117,19 +117,19 @@ def template_file_path
 
           filename = self.instance_method(:initialize).source_location[0]
           filename_without_extension = filename[0..-(File.extname(filename).length + 1)]
-          sibling_files = Dir["#{filename_without_extension}.*"] - [filename]
+          sibling_template_files = Dir["#{filename_without_extension}.????.{#{ActionView::Template.template_handler_extensions.join(',')}}"] - [filename]
 
-          if sibling_files.length > 1
+          if sibling_template_files.length > 1
             raise StandardError.new("More than one template found for #{self}. There can only be one sidecar template file per component.")
           end
 
-          if sibling_files.length == 0
+          if sibling_template_files.length == 0
             raise NotImplementedError.new(
               "Could not find a template file for #{self}."
             )
           end
 
-          sibling_files[0]
+          sibling_template_files[0]
         end
       end
 
diff --git a/test/action_view/component_test.rb b/test/action_view/component_test.rb
index 67372afb8..15454f4ab 100644
--- a/test/action_view/component_test.rb
+++ b/test/action_view/component_test.rb
@@ -130,6 +130,12 @@ def test_renders_another_component
     assert_equal trim_result(result.css("div").first.to_html), "<div>hello,world!</div>"
   end
 
+  def test_renders_component_with_css_sidecar
+    result = render_inline(CssSidecarFileComponent)
+
+    assert_equal trim_result(result.css("div").first.to_html), "<div>hello,world!</div>"
+  end
+
   def test_template_changes_are_not_reflected_in_production
     ActionView::Base.cache_template_loading = true
 
diff --git a/test/app/components/css_sidecar_file_component.css b/test/app/components/css_sidecar_file_component.css
new file mode 100644
index 000000000..1c3383459
--- /dev/null
+++ b/test/app/components/css_sidecar_file_component.css
@@ -0,0 +1,3 @@
+div {
+  font-weight: bold;
+}
diff --git a/test/app/components/css_sidecar_file_component.html.erb b/test/app/components/css_sidecar_file_component.html.erb
new file mode 100644
index 000000000..c1e51cf92
--- /dev/null
+++ b/test/app/components/css_sidecar_file_component.html.erb
@@ -0,0 +1 @@
+<div>hello, world!</div>
diff --git a/test/app/components/css_sidecar_file_component.rb b/test/app/components/css_sidecar_file_component.rb
new file mode 100644
index 000000000..526faa0de
--- /dev/null
+++ b/test/app/components/css_sidecar_file_component.rb
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class CssSidecarFileComponent < ActionView::Component::Base
+  def initialize(*)
+  end
+end