How to use variables using scss partials on ruby on rails

Question

I created a new rails app. I am using Ubuntu 18.04, and Rails 6.0.2.1.

I downloaded a bootstrap template on startbootstrap.com and trying to use it for my landing page. So i copied the css & scss files inside app/assets/stylesheets, and i copied the HTML.

I have the following partials in app/assets/stylesheets : _variables.scss and _call-to-action.scss.

In the same directory, i also have the file application.scss with the following code :

/*
 *= require_tree .
 *= require_self
 */
@import "variables";
@import "call-to-action";

I have the following code in the partial _call-to-action.scss :

.call-to-action {
  background-color: $gray-800;
  background: url('../images/bg-masthead.jpg');
}

I have the following code in the partial _variables.scss :

$white: #fff !default;
$gray-800: #343a40 !default;
$black: #000 !default;

And when i go to my landing page, i have the following error :

SassC::SyntaxError in Pages#home
Showing /home/user/code/myusername/rails-project/app/views/layouts/application.html.erb where line #8 raised:

Error: Undefined variable: "$gray-800".
        on line 4:21 of app/assets/stylesheets/_call-to-action.scss
>>   background-color: $gray-800;

As my partials files are imported on application.scss, i don't understand how to solve this issue. Did i do something wrong ?

EDIT : i removed require_tree and require_self syntax but now i get 500 internal server error. I have this when i check the development.log :

> tail -f log/development.log

rack (2.0.8) lib/rack/sendfile.rb:111:in `call'
actionpack (6.0.2.1) lib/action_dispatch/middleware/host_authorization.rb:83:in `call'
webpacker (4.2.2) lib/webpacker/dev_server_proxy.rb:23:in `perform_request'
rack-proxy (0.6.5) lib/rack/proxy.rb:57:in `call'
railties (6.0.2.1) lib/rails/engine.rb:526:in `call'
puma (4.3.1) lib/puma/configuration.rb:228:in `call'
puma (4.3.1) lib/puma/server.rb:681:in `handle_request'
puma (4.3.1) lib/puma/server.rb:472:in `process_client'
puma (4.3.1) lib/puma/server.rb:328:in `block in run'
puma (4.3.1) lib/puma/thread_pool.rb:134:in `block in spawn_thread'

coreyward · Accepted Answer · 2019-12-23 18:26:51Z

1

If you're using SCSS imports you don't want to use the require_tree and require_self syntax. This is fine alone:

 @import "variables";
 @import "call-to-action";

answered Dec 23, 2019 at 18:26

coreyward

80.5k21 gold badges148 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Franck Robin Over a year ago

I just did it, but now i have 500 Internal Server Error How can i check the logs ?

Ben Trewern Over a year ago

In the file log/development.log

Collectives™ on Stack Overflow

How to use variables using scss partials on ruby on rails

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related