Problem/Motivation

The 5.x radix theme has removed the ability to compile SASS from the base theme, however there are still 3 SCSS partial files located inside sub-folders of the src/components folder.

  1. src/components/forum/_forum.scss (Drupal core module specific)
  2. src/components/nav/_navbar.scss (Drupal overrides inside bootstrap component context)
  3. src/components/offcanvas/_offcanvas.scss (Drupal component style overrides)

Steps to reproduce

Proposed resolution

Decide whether the SCSS partials should be removed or moved to the starterkit.

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#16 Radix-Navbar-Search-Field-issue.jpg35.76 KBkbaringer
Screen Shot 2021-12-17 at 1.13.03 PM.png450.9 KBjwilson3

Issue fork radix-3255272

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jwilson3 created an issue. See original summary.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

Spoke to @doxigo (@Syd on Drupal Community Slack) in #radix channel about this last week:

if there are any SCSS files in the base theme, it can be moved and compiled if necessary within the starterkit, ideally we wouldn’t really need any SCSS files in the parent theme and would be easier to be handled with the element’s bootstrap classes, I’ll take a look and hopefully remove those leftovers

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Assigned: Unassigned » jwilson3

I'll work on an MR.

jwilson3 opened merge request !22

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

Upon deeper investigation, I found that the starterkit's main.style.scss imports these three SCSS files from the parent theme.

// Component
// -----------------------------------------------------------------------------
@import "../../contrib/radix/src/components/navbar/navbar";
@import "../../contrib/radix/src/components/forum/forum";
@import "../../contrib/radix/src/components/offcanvas/offcanvas";

After considering this, I suppose it is smarter to leave the partials in the base radix theme, as this pattern would provide a method going forward for adding support for additional core components or even making changes to the existing components. While this is not perfect, it is better than moving these partials into the starterkit, where they would be more difficult to update and patch existing sites that have already instantiated the starterkit and "disconnected" it from the base from which it was generated.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Status: Active » Closed (won't fix)
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

I was unable to figure out how to close the MR unmerged.

doxigo’s picture

doxigo commented
Status: Closed (won't fix) » Needs work

Okay, we need to re-open this James, I did personally encounter a scenario where this caused some build issues in a particular CI deployment.

There are multiple solutions we can take a look at:
- Handle the build ourselves and just serve the CSS file as a library
- Move them into the subtheme
- Get rid of these if it's not necessary

doxigo’s picture

doxigo commented
Status: Needs work » Fixed

Just removed them for now, will see if it's needed at a later stage

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

jcandan’s picture

jcandan commented

For those coming here from Google. I also experienced issues in my CI pipeline (not having this issue locally).

ERROR in ./src/scss/main.style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
7 │ @import '../../contrib/radix/src/components/navbar/navbar';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/scss/main.style.scss 7:9  root stylesheet

Removed these 3 lines from our sub-theme's ./src/scss/main.style.scss. CI pipeline completed without error.

doxigo’s picture

doxigo commented
Status: Closed (fixed) » Needs work

Opening this back again, have to move that to the subtheme itself instead of the parent theme

doxigo’s picture

doxigo commented

Moved offcanvas within the subtheme and got rid of forum and navbar, it wasn't really necessary to keep those

doxigo’s picture

doxigo commented
Status: Needs work » Fixed

  • doxigo committed 3888561c on 5.0.x 
    Issue #3255272 by jwilson3, doxigo, jcandan: Clean up leftover SCSS
kbaringer’s picture

kbaringer commented
StatusFileSize
new Radix-Navbar-Search-Field-issue.jpg35.76 KB

Hi @doxigo, thanks for keeping the Radix theme up-to-date!! I only just started using it for a new project this week and found the process to set up a subtheme really straightforward. However, when I updated the Radix parent theme from 5.0.7 to 5.0.8 yesterday it broke the Bootstrap styled Search form in the Navbar of my subtheme.
Instead of the inline magnifying glass icon inside the form field it now has a separate 'Search' button. This causes the field to wrap, which pushes the whole navbar down (see screenshot).

Broken Search Field

I haven't had time to dig into the way Bootstrap is implemented and debug this issue (since the whole point of using the Radix theme was to save time), but it seems like this regression was caused by this change (#15).
As was mentioned in #11, I manually commented out the lines in /src/scss/main.style.scss that imported styles from the parent theme (including for the navbar):

// Parent Drupal related components
// -----------------------------------------------------------------------------
// @import "../../contrib/radix/src/components/navbar/navbar";
// @import "../../contrib/radix/src/components/forum/forum";
// @import "../../contrib/radix/src/components/offcanvas/offcanvas";

Is it possible that the scss that was being imported from the parent is what enabled the inline Bootstrap search bar styles?

doxigo’s picture

doxigo commented
Status: Fixed » Needs work
tstermitz’s picture

tstermitz
Location Colorado
commented

Please add a comment to the release notes for releases after 5.0.7 that it is necessary and safe to comment out these three lines, and move the offcanves.scss to your custom theme - if it is indeed safe to do that. I didn't immediately notice any issues after doing so.

doxigo’s picture

doxigo commented
Status: Needs work » Fixed
doxigo’s picture

doxigo commented

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

danchadwick closed merge request !22