Move to scss @use from @import where possible (#564)

Closes #488

variants/frontend-base/app/frontend/stylesheets/application.scss

@@ -1,3 +1,3 @@
 // The entry point for all SCSS
-@import "reset";
-@import "elements";
+@use "reset";
+@use "elements";

variants/frontend-bootstrap/app/frontend/stylesheets/customized_bootstrap.scss

@@ -9,6 +9,9 @@
 // `$body-color` or write more CSS that override's Bootstrap's CSS like so:
 // `body { color: red; }`.
 
+// We use @import because Bootstrap will not support @use until v6. See
+// https://github.com/twbs/bootstrap/issues/30025#issuecomment-574825600
+
 @import "bootstrap/scss/functions"; // required
 @import "bootstrap/scss/mixins"; // required
 

variants/frontend-bootstrap/template.rb

@@ -6,9 +6,15 @@
 insert_into_file "app/frontend/packs/application.js", "import '../js/bootstrap';", before: 'import "../stylesheets/application.scss";'
 
 copy_file "app/frontend/stylesheets/customized_bootstrap.scss", force: true
-prepend_to_file "app/frontend/stylesheets/application.scss" do
+append_to_file "app/frontend/stylesheets/application.scss" do
   <<~EO_CONTENT
-    @import "../stylesheets/customized_bootstrap";
+
+    // We use @import because Bootstrap will not support @use until v6. See
+    // https://github.com/twbs/bootstrap/issues/30025#issuecomment-574825600 Our own
+    // SCSS files should use @use. Webpack requires that all `@use` be first in a
+    // file which conflicts with the stylelint no-invalid-position-at-import-rule`
+    // rule so we disable it for this line.
+    @import "../stylesheets/customized_bootstrap"; // stylelint-disable-line no-invalid-position-at-import-rule -- See above
   EO_CONTENT
 end