Converting a Drupal 7 Site from Straight Css to Use Node.sass

Or, just adding this setup to your current theme, even if it is Ruby...

Recently I inherited a css-only Drupal 7 project. I thought I would document the steps I went through modernizing it to use a node.sass compiling solution. If you are interested in an in depth view of adapting the existing css, please head over to Chris D’s blog: Converting a Drupal 7 theme from CSS to Sass.

Current folder structure for regular css based site:

sites/all/themes/custom/client-theme/

css/

js/

Images/

Current folder structure for Ruby based site:

sites/all/themes/custom/client-theme/

css/

sass/

js/

images/

gemfile

.rvm

Step 1: Setting up Node

We would like to use a node.sass based solution to manage our scss => css, and handle some helper tasks. Our theme needs to use node, and know what version it is expecting.

Because the version of node that we are using on each project can vary we use Node Version Manager (NVM). This allows us to switch between versions and gives us a way to manage this switching easily.

To allow NVM to do this we create a .nvmrc file. In terminal, and from within our theme folder we are going to run:

This is going to add the file for version checking of node. Comma placement - "Once the task is complete, our theme has the nvmrc file and a version inside it. We can run ‘nvm use’ to check we are using the version we just specified.

Party.

Step 2: Getting The Theme Layer Started

The next thing we want to do is install our theme's brain. To do this we are going to add a gulp.js file and a package.json file to the the theme root. These will tell the theme what scripts it has available and add the necessary modules it needs to run those scripts. Use ‘npm install’ to install all project dependencies set in the project’s package.json.

I have two that we made earlier (package.json) (gulp.js), and I am going to drop those in. I am also going to add a gitignore file, so that our modules are not committed.

Ok.

Step 3: Get the right structure in place

Now we have the ability to run node commands, but we need to adjust our structure for it to make sense.

First, let's add our sass folder as our watch and compile scripts are looking for this folder (line 22 of the example gulp file provided above). We add this to our theme root.

Now we can add our theme structure inside this new folder.

Here is mine:

sites/all/themes/client-theme/

sass/

Init.scss

Site.main.scss

Site.no-query.scss

Base/

Css reset styles here

Components/

​Our site components here eg. header.scss

Layout/

Site layout files here eg. l-page.scss

Utils/

Variables, breakpoints and other utility styles.

Right now we are good to test our node modules are working correctly.

Note that because the sass is currently outputting as Site.main.css (based on the file name in the sass folder) it will not interfere with the current site styles, as the theme.info isn't looking for that css file.

No errors? Excellent.

Step 4: Follow Up Points

Now we have the basis to start converting the current site styles into a modern futuristic node driven scss masterpiece. It is at this point you definitely need to check out the previously mentioned blog from Chris D.

If you were updating from Ruby, you might want to remove your Ruby structure. And remember some mixins may be reliant on those gems being installed, so you may have to run a dual setup until you can fully replace them.