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:

mozaic.config.js

module.exports = {
/* options */
}

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:

mozaic.config.js

module.exports = {
sass: {
includePaths: ['./src/path/to/cssDir/'],
},
}

sass.indentWidth: integer

Change the indent width of the compiled CSS file.

Default values: 2

Example:

mozaic.config.js

module.exports = {
sass: {
indentWidth: 4,
},
}

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.

mozaic.config.js

module.exports = {
tokens: {
localTokensSrcPath: './src/tokens/', // path to your own js files
localTokensExportPath: './dest/build/', // path to compiled files
},
}

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: **

mozaic.config.js

bemEntitiesDelimiters: {
modifier: '--',
element: '__',
media: '@',
}

stylelint.prefixes: Array

Allow you to specify additional prefixes. Multiple prefixes can be added.

**Default values: ['mc-', 'ml-', 'mu-', 'mt-', 'mdu-'] **

mozaic.config.js

prefixes: ['lrc-', 'lrl-', 'LrUtility-'],

**Full example: **

mozaic.config.js

module.exports = {
stylelint: {
caseStyle: 'kebab-case', // ['camelCase', 'snake_case', 'PascalCase']
bemEntitiesDelimiters: {
modifier: '--',
element: '__',
media: '@',
},
prefixes: ['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: **

mozaic.config.js

module.exports = {
browserslist: ['last 2 versions', 'firefox >= 45', 'IE >= 11'],
}

PurgeCSS option:

purgecss : Object

Allow you to clean up CSS from your sources files. Default values: null

**Example: **

mozaic.config.js

purgecss: {
content: ['./src/**/*.html', './src/**/*.js', './src/**/*.vue']
}

To see all available options, referer to the official documentation of the PostCSS plugin