CODEWITHSUNDEEP
node.jsgruntjssails.js
JLGarcia
JLGarcia

Reputation: 336

Sails is not injecting the files within the assets folder

I just did a fresh installation of sails (v0.11.0) in my server and after checking this up and working on controllers I found that css, js and templates files included into the assets folders are not being injected to the layout, if there any reason for this to happen? I mean, it is a clean fresh sails installation....

Upvotes: 3

Views: 1563

Answers (1)

ceotoolsuite
ceotoolsuite

Reputation: 194

In my quest to get SailsJS to auto-inject stylesheets into the layout file under views/layouts/layout.handlebars in my case, I've found out a couple things...

When you first create your sails app using:

sails new APPNAME --template=handlebars --verbose

note: link below explains above syntax...

Using handlebars templates in Sails.js

  1. Go to config > views.js It will say:

    layout: 'layouts/layout.handlebars'

    change to:

    layout: 'layouts/layout',

  2. Go to tasks > config > sails-linker.js Because I'm in development mode right now I will Ctrl + f searching for: "devStyles"

    devStyles: {
    options: {
        startTag: '<!--STYLES-->',
        endTag: '<!--STYLES END-->',
        fileTmpl: '<link rel="stylesheet" href="%s">',
        appRoot: '.tmp/public'
    },

    files: {
        '.tmp/public/**/*.html': require('../pipeline').cssFilesToInject,
        'views/**/*.html': require('../pipeline').cssFilesToInject,
        'views/**/*.ejs': require('../pipeline').cssFilesToInject
        //ADD HANDLEBARS INJECTION HERE
    }
},

Notice it has .html, & .ejs types being injected but not .handlebars

add this line:

'views/**/*.handlebars': require('../pipeline').cssFilesToInject

where I commented:

//ADD HANDLEBARS INJECTION HERE

At this point you should be able to drop a .css file into assets > styles and have it auto-copied to .tmp/public/styles

run:

sails lift

in your command prompt and give it about 20 seconds or so to have the stylesheet manifest its style on whatever page you have in your routes.js

    '/': {
      view: 'index'
    }

As you can see, I made a new .handlebars file index.handlebars and set it as my root level page. You may have to refresh the page a time or two to get the newly auto-injected CSS to show.

P.S. It appears there is no more need to append --linker when first creating a SailsJS project. Also fyi, I'm using sails version 0.11.0

Also if you run sails lift --verbose the line below is how you know the .handlebars injection is working

verbose: Grunt :: File "views/layouts/layout.handlebars" updated.

Hope this helps!

Also, when adding Handlebars Helpers they should go in a file helper.js which should be located in config > helper.js

At the top of the helper.js file I found I had to require handlebars as follows

handlebars = require('sails/node_modules/express-handlebars/node_modules/handlebars');

Upvotes: 4

Related Questions