When I tried to put scss, which was written separately from Rails, into Rails, I got SassC :: SyntaxError in Users :: Sessions # new.

table of contents

• Introduction
• Execution environment
• Reason
• Solutions
• Summary

Introduction

This time when I tried to put scss which I wrote separately in rails background-color: color-basic; By the way Error: Undefined variable: "color-basic". I got the error.

Execution environment

This article has been confirmed to work in the following operating environment.

• ruby (2.7.1)
• rails (6.0.3)

Reason

• Default in application.scss (css)

 *= require_tree .

Is reading all css files under ** app/assets ** So The reading order is out of order, The mixim file with $ color specified was not loaded first. It looks like the `* is written before and commented out. Na ● They are alive like the deer god warriors ...! !! ``

Solutions

This time in style.scss

style.scss

@import "./Hogehoge/mixin";
@import "./Hogehoge/plugin";
@import "./Hogehoge/reset";
(And so on)

I wanted to write a group of @import like this and load it, so

1 in application.scss (Change to scss for application.css)

2 Delete the * = require_tree. Line in the same file

3 @import like ↓ at the end and read style.scss (file with a lot of @import such as)

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_self　//Meaning that this file is read first.
 */
 @import "./css/style.scss";  //Import here(Application)Put the scss you want. This time stylesheet/I put the scss I want to import in the css folder, but please match it with the file structure and name!

I solved it like this.

Summary

The contents of application.scss (css) Be careful because the back of * is also alive!