Configuration
mozaic.config.js
mozaic.config.js allows you to configure and customize Mozaic.
Create a mozaic.config.js file at the root of your project:
SASS options
sass.includePaths
: array of paths
Allow you to import SCSS files from those paths without having to specify them. Specified paths will be added to the default ones.
Default values:
[ './node_modules/@mozaic-ds/styles/', './node_modules/@mozaic-ds/styles/settings-tools/', './node_modules/@mozaic-ds/styles/typography/', './node_modules/@mozaic-ds/styles/layout/', './node_modules/@mozaic-ds/styles/utilities/', './node_modules/@mozaic-ds/styles/components/', './node_modules/@mozaic-ds/tokens/build/scss/', './node_modules/',]
Example:
sass.indentWidth
: integer
Change the indent width of the compiled CSS file.
Default values: 2
Example:
Tokens options:
tokens.localTokensSrcPath
and tokens.localTokensExportPath
localTokensSrcPath
is used to define your local emplacement for your custom tokens, localTokensExportPath
defines where they should be built.
Note that both options should always be used together.
Use those options to customize tokens. For more information, read our Tokens customisation guide.
stylelint options:
stylelint.disabled
Allow you to disabled Mozaic built-in config. Default values: 'false' **Example: **
disbaled: true | false
stylelint.caseStyle
: String or Regex
Allow you to choose the case style to lint. You can add your own Regex rule to lint.
Default values: 'kebab-case'
**Example: **
caseStyle: 'kebab-case' | 'camelCase' | 'snake_case' | 'PascalCase' | /^[a-z]+(_[a-z]+)*$/
stylelint.bemEntitiesDelimiters
: Object
Allow you to specify separators to check the BEM structure.
**Default values: **
stylelint.prefixes
: Array
Allow you to specify additional prefixes. Multiple prefixes can be added.
**Default values: ['mc-', 'ml-', 'mu-', 'mt-', 'mdu-'] **
**Full example: **
Browserslist option:
browserslist
: Array
`browserslist.disabled
Allow you to disabled Mozaic built-in config. Default values: 'false'
**Example: **
disabled: true | false
browserslist
is used to define custom browsers to use for SCSS compilation.
** Default value: **
['> 0.3%', 'last 3 version', 'IE > 10']
**Full example: **
PurgeCSS option:
purgecss
: Object
Allow you to clean up CSS from your sources files. Default values: null
**Example: **
To see all available options, referer to the official documentation of the PostCSS plugin