This guide will allow you to define your own folder structure for your stylesheets while building Shopify themes.
Stylesheets can be created and maintained in css/ from your theme's root folder.
In the example css/ folder there is a single theme.scss.liquid file that imports other stylesheets into it. Files starting with an underscore are not added to your assets/ folder.
You can use Grunt or Gulp to achieve the same effect.
- Ruby 1.9+
- Node.js 0.10.22+ (check and upgrade Node.js here)
- Shopify Theme Gem
├── assets/
├── layout/
├── snippets/
├── templates/
│
├── // Non-theme files/folders (Theme Gem, Grunt, Gulp, etc.)
├── config.yml
├── css/
├── Gemfile
├── Gruntfile.js
├── package.json
├── gulpfile.js
└── node_modules/
Navigate to your theme root in Terminal.
npm install -g grunt-cli
You may have to use sudo for this.
We specifically want the Gulp plugin so we have to install Gulp. Everything after this will be handled with Grunt.
npm install -g gulp
npm install gulp-cssimport
You may have to use sudo for this.
npm install
bundle install
grunt
That's it. Gruntfile.js will run both theme watch to upload new theme files to your store and grunt gulp to concatenate the stylesheets in /css at the same time.
Navigate to your theme root in Terminal.
npm install -g gulp
You may have to use sudo for this.
npm install gulp-cssimport
gulp watch
Make sure config.yml file is setup properly. Docs here.
In a separate Terminal window that is still in your theme's root, run:
theme watch
Once gulp or grunt runs it will create theme.scss.liquid inside your /assets/ folder. To call this file you need to place {{ 'theme.scss.css' | asset_url | stylesheet_tag }} inside your theme.liquid file. Shopify automatically compiles everything on their servers. If for some reason it is not compiling it's probable because there is a random charset somewhere inside your stylesheet.