custom: fix stylesheet customization
authorAzul <azul@riseup.net>
Wed, 26 Jul 2017 09:19:41 +0000 (11:19 +0200)
committerAzul <azul@riseup.net>
Wed, 26 Jul 2017 09:19:41 +0000 (11:19 +0200)
fixes #8794

Reported the underlying issue here:
https://github.com/rails/sass-rails/issues/406

Basically `@import` works like this:
* look for the file relative to the current file
* look for the file as an absolute path following the priorities in the
* asset load_paths

If the file can be imported as a relative path that will take
precedence.

So in order to pick up the head and tails inside customization rather
than in app/assets there are three possibilities:
1) use an absolute path. This is not as easy as it seems. There is no
way of indicating a path is meant to be absolute so we would have to
ensure it does not resolve to a relative path.
2) have a application.scss file inside the customization folder. Since
this is the main file it will be used instead of the app/assets one. In
there relative paths will now also default to the customization folder
rather than app/assets. Once we are in an app/assets file though it will
not go back to picking up customization with relative paths
3) use //= require instead of import. rails-sass advices against this as
each required file would be compiled on it's own and variables could not
be shared.

Going with option 1 here:
```scss
// application.scss:
@import "custom/head_import";
```

```scss
// custom/head_import.scss:
@import "head";
```

As long as there is no custom/head.scss in app/assets it will import
head as an absolute path and thus prefer config/custom over app/assets.

This seems like the best option for now as it does not require changes
to the deployments.

app/assets/stylesheets/application.scss
app/assets/stylesheets/custom/head-import.scss [new file with mode: 0644]
app/assets/stylesheets/custom/tail-import.scss [new file with mode: 0644]

index f42044b..1fed154 100644 (file)
@@ -1,7 +1,9 @@
 //
-// import custom scss, content to be set in deployment.
+// This will in turn import config/customization/stylesheets/head
+// It is a workaround for sass-rails defaulting to relative imports.
+// https://0xacab.org/leap/webapp/issues/8794
 //
-@import "head";
+@import "custom/head-import";
 
 // First import journal variables
 // @import "bootswatch/cerulean/variables";
@@ -22,6 +24,8 @@
 // @import "bootswatch/cerulean/bootswatch";
 
 //
-// import custom scss, content to be set in deployment.
+// This will in turn import config/customization/stylesheets/tail
+// It is a workaround for sass-rails defaulting to relative imports.
+// https://0xacab.org/leap/webapp/issues/8794
 //
-@import "tail";
+@import "custom/tail-import";
diff --git a/app/assets/stylesheets/custom/head-import.scss b/app/assets/stylesheets/custom/head-import.scss
new file mode 100644 (file)
index 0000000..c097d8d
--- /dev/null
@@ -0,0 +1 @@
+@import "head";
diff --git a/app/assets/stylesheets/custom/tail-import.scss b/app/assets/stylesheets/custom/tail-import.scss
new file mode 100644 (file)
index 0000000..3a61253
--- /dev/null
@@ -0,0 +1 @@
+@import "tail";