This forum has moved, please join us on github discussions. We will keep these old posts available for reference. Thank you!

Sass instead of Less, Help!

Hi,

I discovered Apostrophe a few days ago, and I must say that itā€™s a cms solution of choice for a developer.

While experimenting with it though, I quickly discovered that I will need to use SASS instead of LESS for my project. By the way, I donā€™t understand why Apostrophe uses LESS by default. Anyway, my goal is to use Zurb foundation with SASS, and in this purpose, I found a gulpfile.js (the only one found by googling ā€œGulpfile for Apostrophe CMSā€). I managed to get it run, but I am not really sure about where to put my scss files. I tried in ā€˜lib/ā€¦/apostrophe-assets/cssā€™, and in ā€˜public/cssā€™ (not a good idea), the gulp script detects files changes, but doesnā€™t convert it to css, or doesnā€™t know where to output result, I donā€™t know, so I canā€™t push the resulting css. Iā€™m missing something here, but Iā€™m pretty sure iā€™m not the first to try and use SASS with Apostropheā€¦

Any Help welcome !!!

Thanks,

Fred.

There isnā€™t a hard and fast ā€˜rightā€™ way to set up your source SASS structure. In-house, Apostrophe developers incorporating Gulp for custom asset handling set up a /src directory at the top level of their project, then compile the source assets to browser-compatible CSS/JS and push them to where Apostrophe is looking for them. This way your custom asset handling is far removed from Apostropheā€™s compilation and asset bundling process.

For an example Gulpfile in an Apostrophe project you can reference https://github.com/punkave/frontend-starter/blob/master/gulpfile.babel.js

For more information on the ā€˜What is Apostrophe looking for and where does it expect it to be?ā€™ question, see the Getting Started tutorial, which details configuring an asset module http://apostrophecms.org/docs/tutorials/getting-started/pushing-assets.html

1 Like

Hi soleshoe,

Here is my solution to import Bootstrap v4 SASS into the project:

  1. yarn add bootstrap@next

  2. Import gulpfile.babel.js with all its config and dependencies from frontend-starter as @stuartromanek suggested. Only change dest to this:

const dest = './lib/modules/apostrophe-assets/public/';

  1. Put into src/sass/site.scss:

@import '../../node_modules/bootstrap/scss/bootstrap.scss';

  1. Put into lib/modules/apostrophe-assets/public/css/site.less:

@import (inline) "site.css";

Viola! :slight_smile:

Now we may customize Bootstrap by editing src/sass/site.scss and placing directives before and after @import.

1 Like

Nice one @timashev :stuck_out_tongue:

Thank you for your solution.

For info, I took another path :
http://forum.apostrophecms.org/t/apostrophe-sass-foundation-for-sites/323/1

Cheers,

Fred.

@timashev, following your solution with bootstrap, do you also need to include some bootstrap javascript libs ? and if yes, from where in apostropheCMS ?

Thx !

Hi @soleshoe,

I have created a symlink lib/modules/apostrophe-assets/public/js/bootstrap pointing to ../../../../../node_modules/bootstrap/dist/js and then added bootstrap.bundle.min.js file to lib/modules/apostrophe-assets/index.js script like this:

module.exports = {
  stylesheets: [
    { name: 'site' }
  ],
  scripts: [
    { name: 'bootstrap/bootstrap.bundle.min' },
    { name: 'site' }
  ]
};
1 Like