Joralf/_test.html.erb

## _test.html.erb
<div class="test">
  I should be blue with a background
</div>

## application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_pack_tag 'entry' %>
    <%= javascript_pack_tag "entry" %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

## entry.js
import './entry.scss';
import 'components';

## entry.scss
@import './variables';
@import '../components/index';

## index.js
import "components/test/test";

## index.scss
@import './test/test';

## test.js
// No importing here, else there is no access to variables.scss

## test.scss
.test {
  background-image: url('./test.jpg');
  color: $test-variable;
}

## variables.scss
$test-variable: blue;
	<!DOCTYPE html>
	<html>
	<head>
	<title>Myapp</title>
	<%= csrf_meta_tags %>

	<%= stylesheet_pack_tag 'entry' %>
	<%= javascript_pack_tag "entry" %>
	</head>

	<body>
	<%= yield %>
	</body>
	</html>
	.test {
	background-image: url('./test.jpg');
	color: $test-variable;
	}