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!

#1

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.

#2

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
#3

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
#4

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.

#5

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

Thx !

#6

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