3

I'm a FE devleoper just beginning to work with an existing Magento 1.8 CE website from a git repository. I find it difficult to understand all the rules, but working my way through it.

One of the first things I want to change is switch to using COMPASS/SASS - installing and using GruntJS alongside.

Can I simply install Grunt using the default dirctories without irritating Magento? Where can I place the SCSS files that will then be compiled into the css files in /skin/frontend/PROJECTNAME/PROJECTNAME/css/?

Could I simply create and use e.g. a directory named /skin/frontend/PROJECTNAME/PROJECTNAME/source/, or will Magento be irritated by that?

Sorry if this is a dumb question, but I'm really unsure about the complex directory structure and Magento's coding by convention rules and don't want to make a bad decision when introducing GruntJS and COMPASS.

Thank you all.

3 Answers 3

3

We currently contain all our un-processed CSS outside of the Magento filesystem, so our project structure would look like this:

/project_root
    - scss/
    - magento/
    - Gruntfile.js

When grunt sass is run from project_root the compiled css is saved to the correct skin path (magento/skin/frontend/package/default/css/) inside Magento.

This way you don't have to worry about updating the Magento filesystem and serving *.sass files to the internet.

Your Gruntfile.js could look something like this with the grunt-contrib-sass plugin from https://npmjs.org/package/grunt-contrib-sass

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            magento: {
                options: {
                    style: 'compressed'
                },
                files: {
                    'magento/skin/frontend/package/default/css/style.css': 'frontend/scss/core.scss'
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.registerTask('default', ['sass']);
};

EDIT

If I was unable to modify the project root, I would add a new directory called scss to the skin path (/skin/frontend/package/default/scss) and store the scss framework here.

Then add Gruntfile.js to the root of Magento and compile the sccs here: /skin/frontend/package/default/css.

Hope this helps.

2
  • Yes, that's a very good example! Thank you. Another question then: Could I as well place my scss directory right in the magento root - in your example this would then be /project_root/magento/scss ? In our project unfortunately the magento installation itself is the project root...
    – RBloeth
    Dec 12, 2013 at 12:54
  • Updated my answer. Dec 12, 2013 at 14:26
2

The only reason I can think of why you'd need to worry about the specific folders you place your files in, is if you're using one of Magento's convenience methods for loading CSS, JS, etc (ie. $this->getSkinUrl())

Creating your own folder under /skin will be fine.

0
2

If anyone is still interested in how to do this I've created a Magento Boilerplate that does just this. Just drag and drop then run the grunt commands to watch.

https://github.com/jasonalvis/magento-boilerplate

Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.