Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

It fails to compile the SCSS files with variable #95

Open
oxo-yuta opened this issue Feb 13, 2023 · 3 comments
Open

It fails to compile the SCSS files with variable #95

oxo-yuta opened this issue Feb 13, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@oxo-yuta
Copy link

Describe the bug
It fails to compile the SCSS files with variable.

To Reproduce
Steps to reproduce the behavior:

  1. create scss files, style.scss and variable.scss
  2. define any variables in variables.scss
  3. use that variable in style.scss
  4. it shows an error that the variable is not defined

Expected behavior

  • compile them correctlly
  • It should be good if it is able to control the order to import?
@oxo-yuta oxo-yuta added the bug Something isn't working label Feb 13, 2023
@mantaroh
Copy link
Collaborator

@oxo-yuta

Thank you for filing issue 🚀
May I ask you to show the sample code?

I tested the following code, then I could build without failure.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="./assets/style.css">
</head>
<body>
  <div class="black"></div>
</body>
</html>

style.scss:

@import "./variable.scss";

.black {
    background-color: $black;
    width: 100px;
    height: 100px;
}

variable.scss:

$black: #000;
$white: #fff;

@oxo-yuta
Copy link
Author

oxo-yuta commented Feb 13, 2023 •
edited
Loading

@oxo-yuta

Thank you for filing issue 🚀 May I ask you to show the sample code?

@mantaroh

Thank you for checking!

You can check the code from here https://github.com/oxo-yuta/oxo-tech-site-spear/tree/scss
I'm sorry if it is my mistake 🙇

@mantaroh
Copy link
Collaborator

@oxo-yuta

Thanks!

I changed the bellow code. In this case, I used the import syntax. However SASS recommend use use syntax since import will be deprecated.

I'm not sure the bluma library, but I guess we need to import variable.scss before using defined variable.

diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss
index 2044f59..a19fb39 100644
--- a/src/assets/scss/header.scss
+++ b/src/assets/scss/header.scss
@@ -1,3 +1,5 @@
+@import "./variable.scss";
+
 .navbar {
   $navbar: &; // 親要素を変数に定義
   // padding: 48px;
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index f98659f..09ebcf1 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -1,3 +1,9 @@
+@import "./variable.scss";
+@mixin until ($bk) {
+  @media screen and (max-width: #{$bk}) {
+    @content
+  }
+}
 .article {
   font-family: 'Murecho', sans-serif;
   display: flex;
diff --git a/src/assets/scss/myBulma.scss b/src/assets/scss/myBulma.scss
index 2397713..d75f641 100644
--- a/src/assets/scss/myBulma.scss
+++ b/src/assets/scss/myBulma.scss
@@ -1,3 +1,4 @@
+@import "./variable.scss";
 // Update some of Bulma's component variables
 $scheme-main: $background;
 $link: $accent;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mantaroh @oxo-yuta