grunt-shopify-sass v0.2.1
grunt-shopify-sass
Concatenate your Sass files defined by the @import order.
Why on earth does this exist?
Good question. Recently, Shopify has allowed theme developers to upload .scss.liquid
files (yay!). This opens up all sorts of opportunities for theme developers being able to manipulate merchant settings with Sass functions like lighten()
, mix()
, mixins and includes (to name a few).
Unfortunately, the Shopify platform currently doesn't support @import
. This means that developers must first concatenate their Sass files into a single file to upload. Previously, you'd use grunt-contrib-concat and manually declare the order of files in your Gruntfile. This is a big departure from what developers have grown accustomed to when dealing with Sass – bring back the @import
!
This plugin takes your main Sass file, finds and reads all of the @import
and concatenates them into a destination file of your choosing.
Getting Started
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-shopify-sass --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-shopify-sass');
The "shopify_sass" task
Overview
In your project's Gruntfile, add a section named shopify_sass
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
shopify_sass: {
your_target: {
// Target-specific file lists
},
},
});
Usage Examples
Simple
In this example, all of the imports in styles/theme.scss
will be concatenated into assets/theme.scss.liquid
.
/* Example "styles.theme.scss" */
@import 'normalize.scss';
@import '_typography.scss';
@import '_layout.scss';
@import '_product.scss';
grunt.initConfig({
shopify_sass: {
files: {
'assets/theme.scss.liquid': "styles/theme.scss"
},
},
});
Multiple sources
In this example we're using two different source files written in CoffeeScript.
grunt.initConfig
shopify_sass:
files:
'assets/theme.scss.liquid': ['styles/theme.scss', 'styles/additional.scss']
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
- 2014-07-19 v0.2.1 Remove base option, keep styles in src files
- 2014-10-30 v0.2.0 First working version.