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.
├── 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.
{
"name": "shopify-css-import",
"devDependencies": {
"grunt": "~0.4.4",
"grunt-concurrent": "~0.5.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-exec": "~0.4.5",
"grunt-gulp": "^0.1.0",
"load-grunt-tasks": "^0.4.0"
}
}
npm install
source 'https://rubygems.org'
gem 'shopify_theme', :git => 'git@github.com:Shopify/shopify_theme.git'
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 - gulp
You may have to use sudo
for this.
npm install gulp-cssimport
// https://github.com/unlight/gulp-cssimport
var gulp = require('gulp');
var cssimport = require("gulp-cssimport");
// Process CSS
gulp.task('styles', function(){
return gulp.src('css/**/*.*')
.pipe(cssimport())
.pipe(gulp.dest('assets/'));
})
// Watch files
gulp.task('watch', function () {
gulp.watch('css/**/*.*', ['styles']);
});
// Default task
gulp.task('default', ['watch']);
gulp watch
Make sure your config.yml file is setup properly. Docs here. In a separate them Terminal window that is still in your theme’s root, run:
theme watch
Copyright (c) 2014 Shopify. Released under the MIT-LICENSE.