Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

shopify-css-import

Add CSS import functionality to Shopify theme development with Grunt.js or Gulp.js

Subscribe to updates I use shopify-css-import


Statistics on shopify-css-import

Number of watchers on Github 74
Number of open issues 3
Average time to close an issue about 2 months
Main language Liquid
Average time to merge a PR 1 day
Open pull requests 1+
Closed pull requests 3+
Last commit over 3 years ago
Repo Created over 6 years ago
Repo Last Updated over 2 years ago
Size 94 KB
Homepage http://shopify.gi...
Organization / Authorshopify
Contributors4
Page Updated
Do you use shopify-css-import? Leave a review!
View open issues (3)
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating shopify-css-import for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Deprecation warning

Instead of these one-off grunt/gulp build tasks, developers are encouraged to check out Slate - a theme scaffolding and command line tool built for developing Shopify themes.

You can continue to use these tasks; however, this repo will not be kept up-to-date with changes in Shopify theme development.


Adding CSS @import to theme development

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.

The theme files included in this repo are just for the example. Find the latest version of Timber here.

Requirements

Basic theme structure

 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/

Grunt.js

Navigate to your theme root in Terminal.

1. Install grunt globally
npm install -g grunt-cli

You may have to use sudo for this.

2. Move Gemfile, Gruntfile.js and package.json to your theme's root
3. Install gulp (globally) and gulp-cssimport

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.

4. Install required packages
npm install
5. Run bundle install
bundle install
6. Run grunt
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.

Gulp.js

Navigate to your theme root in Terminal.

1. Install gulp globally
npm install -g gulp

You may have to use sudo for this.

2. Move gulpfile.js file in your theme's root
3. Install required packages
npm install gulp-cssimport
4. Run gulp watch
gulp watch
5. Run Shopify theme gem

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

Output

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.

shopify-css-import open issues Ask a question     (View All Issues)
  • over 4 years Importing from more than one subdir level
  • about 6 years npm WARN package.json shopify-css-import@ No repository field.
shopify-css-import open pull requests (View All Pulls)
  • Update to latest Timber and some more... :)
shopify-css-import list of languages used
Other projects in Liquid
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark