-
Notifications
You must be signed in to change notification settings - Fork 1
JavaScript Configuration
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.
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
import SynergySassImporter from '@onenexus/synergy-sass-importer';
const SynergySassImporter = require('@onenexus/synergy-sass-importer');
{
test: /\.scss$/,
use: [
{
loader: 'sass-loader',
options: {
importer: SynergySassImporter
}
}
]
}
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
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
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
)
);
To learn how to expose your project's theme to your module's configuration, see the Theming page.