Skip to content

JavaScript Configuration

esr360 edited this page Nov 23, 2019 · 9 revisions

Make sure you have read the Module Configuration page so that you have full context for this page

If you are using Node.js, You can use JavaScript or JSON for your module's configuration, which is useful for sharing properties between your module's JavaScript and Sass assets, and plays nicer with theming.

Setup

Before you get started using Cell in conjunction with JavaScript, you must first setup your Sass compiler to use @onenexus/synergy-sass-importer as an importer.

Cell comes with @onenexus/synergy-sass-importer as a dependency so does not need to be manually installed

Webpack

ES6 Imports
import SynergySassImporter from '@onenexus/synergy-sass-importer';
CommonJS
const SynergySassImporter = require('@onenexus/synergy-sass-importer');
Configuration
{
  test: /\.scss$/,
  use: [
    {
      loader: 'sass-loader', 
      options: {
        importer: SynergySassImporter
      }
    }
  ]
}

CLI

In Node.js projects with Node-Sass and Cell installed, no setup is needed if you generate your CSS using the node-sass CLI command:

node-sass /PATH/TO/app.scss --importer=node_modules/@onenexus/synergy-sass-importer/dist/synergy-sass-importer.js

Usage

Once your Sass compiler has been setup to use Synergy-Sass-Importer, you can begin to import JavaScript/JSON files in your .scss files.

See the Synergy-Sass-Importer Wiki for full documentation

Any of the following are valid imports into .scss files:

  • Any valid .json/.json5 file
  • Any .js file that exports an object
  • Any .js file that exports a function which returns an object

The resultant object of the import will be converted to a Sass map and exposed to your Sass under a variable named after the name of the file that was imported. As Cell looks for a $config variable, the easist thing is to name your JavaScript/JSON import config.{js|json}.

@import 'config.js'; // `$config` is now defined

@include module {
  ...
}

If you need to name the file something else, you can assign the imported map to a $config variable manually:

@import '../../../somethingElse.json'; // `$somethingElse` is now exposed
$config: $somethingElse; // assign the imported map to a `$config` variable

@include module {
  ...
}

See the Module Configuration page for more information

Example JavaScript/JSON Config to Sass Map

Given the following config.js file imported into your Sass file:

export default {
  name: 'myModule',
  colors: ['#0099ff', '#54ff00', '#ff006a'],

  someComponent: {
    background: '#c1c1c1',
    gutter: '1em'
  }
}

...it would effectively add the following code to your Sass:

$config: (
  'name': 'myModule',
  'colors': (#0099ff, #54ff00, #ff006a),
  
  'someComponent': (
    'background': #c1c1c1,
    'gutter': 1em
  )
);

Theming

To learn how to expose your project's theme to your module's configuration, see the Theming page.

Clone this wiki locally