Now that we've restructured our theme's SCSS, we need to move it into the actual theme directory, instead of keeping it in a separate build location. Why? Well, simply put as part of this we're going to be using the built-in SASS compiler that ships with Concrete. Since that's the case, we're going to need the files to be accessible to Concrete as it runs.
First, copy the entire
assets/scss directory into the
Next, rename the
application/themes/flintstone/css/scss/skins directory to
presets. Then, move the
presets directory up one level, so it's directly inside
Here's what the
application/themes/flintstone/css directory looks like now:
Update main.scss Skin Entrypoints
Next, you'll need to change the inclusions in the
main.scss files, because the
_common.scss file that's imported within it is no longer at that path. You have to change:
Update All node_modules/ Inclusions
Next, make sure that you remove all tildes (~) that may be in your
@import "~@concrete/" statements. You may be using these throughout your files. Make sure to remove them. For example,
_common.scss should look like this:
application/themes/flintstone/css/scss/features/_imagery.scss should look like this:
// Bedrock Lightbox @import '@concretecms/bedrock/assets/imagery/scss/frontend/lightbox/lightbox'; // Bedrock Gallery @import '@concretecms/bedrock/assets/imagery/scss/frontend/gallery/gallery'; // Bedrock Hero Image @import '@concretecms/bedrock/assets/imagery/scss/frontend/hero-image';
Now, you'll need to update
webpack.mix.js. Since the shipping skins are still built by our Laravel Mix setup, we want to ensure that Laravel Mix still works, even though the customized version of the theme is powered by the separate SASS compiler that ships with Concrete.
mix.sass(...) calls to reference the files at their new locations.
mix .sass('themes/flintstone/css/presets/default/main.scss', 'css/skins/default.css') .sass('themes/flintstone/css/presets/wilma/main.scss', 'css/skins/wilma.css') .js('assets/js/main.js', 'js/main.js');
Move Owl Carousel CSS Into the Theme Directory
Next, we need to move the Owl Carousel CSS we imported into our theme out of
node_modules/ and directly into our theme. Why? Remember,
node_modules/ isn't available within the Concrete environment. It's strictly used within the isolated theme build environment. So while it will work fine to build skins from, since the skin build process takes place within the isolated theme build environment, this will no longer work once the SCSS moves into the customizer, because the customizer works off of only those SCSS files that are available within the theme's directly.
But wait – how does Bedrock work?
If what you're saying is true, you might ask, how does this line still continue to work?
It works because Bedrock and a subset of its functionality actually ships with Concrete CMS. You can see it in
concrete/bedrock/assets. SCSS that imports Bedrock for the following items should work whether it's a custom theme build directory or within the customizer:
- Font Awesome
- Bootstrap 5
But for everything else, you'll need to move it into your theme if you want to make your theme customizable. So let's do that. These are the following problematic lines in our
// Owl Carousel @import "~animate.css/animate.css"; @import "~owl.carousel/dist/assets/owl.carousel.css"; @import "~owl.carousel/dist/assets/owl.theme.default.css";
So let's make a directory named
vendor/ within the
features/imagery directory, and move
owl.theme.default.css into it. Now our
application/themes/flintstone/css directory should look like this:
With that complete, let's change
application/themes/flintstone/css/scss/features/_imager.css to import the files in the new
// Bedrock Lightbox @import '@concretecms/bedrock/assets/imagery/scss/frontend/lightbox/lightbox'; // Bedrock Gallery @import '@concretecms/bedrock/assets/imagery/scss/frontend/gallery/gallery'; // Bedrock Hero Image @import '@concretecms/bedrock/assets/imagery/scss/frontend/hero-image'; // Owl Carousel @import "imagery/vendor/animate"; @import "imagery/vendor/owl.carousel"; @import "imagery/vendor/owl.theme.default"; // Theme customizations @import "imagery/hero-image";
Rebuild your assets with
npm run production. When doing so, I actually received an error about a missing PNG file – owl.video.play.png – so I copied that file into
vendor/ as well. Once that was complete,
npm run production completed successfully.
Add !default To All Customizable Variable Definitions
We're almost ready to start customizing! The last thing we need to do before we start in on enabling customization is getting our
_customizable-variables.scss files ready. In SASS, variables can be suffixed with
! default in order to allow them to be overridden by subsequent variable changes. This is also required in our customizer, otherwise the SASS compiler built into the core will be unable to pass its own custom values into the theme and override the defaults.
_customizable-variables.scss file and add
! default to each variable. Here's what
application/themes/flintstone/css/presets/default/_customizable-variables.scss looks like with this change:
$primary: #375d84 !default; $secondary: #eb7724 !default; $light: #fff !default; $body-bg: #ffd89f !default; $fun: #ec008c !default;
Ready to Customize
We're ready! Our skins have been turned into presets for the customizer, and our variables have been moved into the
_customizable-variables.scss files that are required to launch the defaults for each preset. We can continue to build the skins themselves with
npm while using the customizer within the site.