Setting up Aviate Magento 2 with theme blank sass

Set up up your project

Prerequisites:

• Create app/design/frontend/NAMESPACE/default: mkdir -p app/design/frontend/NAMESPACE/Default
• Create app/design/frontend/NAMESPACE/CUSTOMERNAME: app/design/frontend/NAMESPACE/CUSTOMERNAME

Install Aviate

npm install --save aviate

Add required scripts to package.json

{
  "scripts": {
    "dev": "aviate",
    "build" "aviate build"
  }
}

Create aviate.config.js

const path = require('path')
module.exports = {
  distLocations: [
    path.join(__dirname, 'app/design/frontend/NAMESPACE/CUSTOMERNAME/web/dist')
  ],
  decorateConfig(config) {
    config.entry = Object.assign({}, config.entry, {
        'NAMESPACE/CUSTOMERNAME': [
            path.join(__dirname, 'app/design/frontend/NAMESPACE/Default/styles/styles.scss'),
            path.join(__dirname, 'app/design/frontend/NAMESPACE/CUSTOMERNAME/styles/styles.scss')
        ]
    })

    config.resolve.alias = {
        'theme': path.join(__dirname, 'app/design/frontend/NAMESPACE/CUSTOMERNAME'),
        'theme-default': path.join(__dirname, 'app/design/frontend/WeProvide/Default'),
        'theme-blank-sass': path.join(__dirname, 'vendor/snowdog/theme-blank-sass')
    }

    return config
  }
}

Then create app/design/frontend/NAMESPACE/Default/styles/styles.scss and app/design/frontend/NAMESPACE/CUSTOMERNAME/styles/styles.scss

The default theme is for global styles. The customer theme is for customer specific styles.

You can import files from theme-blank-sass using @import "~theme-blank-sass/FILE"

Using ~ before an import allows you to import from npm modules or aliases defined in aviate.config.js. In this case you can use ~theme ~theme-default ~theme-blank-sass.

Next up is install the Magento 2 module

composer require weprovide/aviate-magento2

This will automatically add NAMESPACE/CUSTOMERNAME.css to Magento's HTML output. In development this is a javascript file adding hot reloading (automatically updating css). In production it'll point to the compiled css file.