Shopify Theme Lab

Configuration

Webpack

Theme Lab uses vanilla webpack configurations, you can easily adjust them however you like. All webpack configs reside inside the .config/webpack/ directory. src/main.js is webpack's main entry point.

CSS preprocessors

TIP

For the most cohesive development experience, it's recommended that you use PostCSS exclusively when working with Tailwind CSS.

By default, only PostCSS is installed. If you want to use a preprocessor it's recommended to use SASS/SCSS since it's the most compatible with a variety of CSS frameworks.

SASS/SCSS

  1. Install SASS packages.
npm install sass sass-loader --save-dev
1
 yarn add sass sass-loader --dev
1

  1. Rename src/css/main.css to src/css/main.scss.

  2. Change the CSS import in src/main.js.

import './css/main.scss'
1

LESS

  1. Install LESS packages.
npm install less less-loader --save-dev
1
 yarn add less less-loader --dev
1

  1. Rename src/css/main.css to src/css/main.less.

  2. Change the CSS import in src/main.js.

import './css/main.less'
1

Stylus

  1. Install STYLUS packages.
npm install stylus stylus-loader --save-dev
1
 yarn add stylus stylus-loader --dev
1

  1. Rename src/css/main.css to src/css/main.styl.

  2. Change the CSS import in src/main.js.

import './css/main.styl'
1