Configuration

Branding

Located in config/branding.scss.

Specify custom colors for the styleguide sidebar and component pages. Browser support for CSS Custom Properties is required. Unsopported browsers fall back to default colors.

:root {
  // GLOBAL

  --fesg-color-primary: #1d5097;
  --fesg-color-text: #222;
  --fesg-color-border: #ddd;
  --fesg-color-background: #f2f4f7;

  // SPECIFIC
  //
  // Use these variables to overwrite global colors for specific elements

  // --fesg-color-sidebar-text
  // --fesg-color-sidebar-highlight-text
  // --fesg-color-sidebar-highlight-background
  // --fesg-color-sidebar-highlight-border
  // --fesg-color-sidebar-background
  // --fesg-color-sidebar-border
  // --fesg-color-sidebar-button-foreground
  // --fesg-color-sidebar-button-background

  // --fesg-color-header-text
  // --fesg-color-header-background
  // --fesg-color-header-border

  // --fesg-color-section-text
  // --fesg-color-section-button
  // --fesg-color-section-background
  // --fesg-color-section-border

  // --fesg-color-footer-text
  // --fesg-color-footer-background
  // --fesg-color-footer-border
}

Config files

Located in the project root.

webpack

Located in config/webpack.js.

Dev server config

Overwrite default settings for the dev server.

module.exports = {
  devServer: {
    // Auto-open in browser (defaults to false)
    open: true,
    // Set browser for auto-open (omit for default browser)
    browser: 'firefox',
    // Set port (defaults to 8080)
    port: 1337
  }
}

webpack config

For simple changes to the webpack config set a configure-object. This will be merged into the default webpack config with webpack-merge.

module.exports = {
  configure: {
    // Merge config changes
    entry: './src/main.js'
  }
}

For more advanced changes set configure as a function. The first argument is the current context aka the project directory. This is needed for absolute webpack paths (e.g. output.path).

module.exports = {
  configure: context => {
    if (process.env.FESG_ENV === 'dev') {
      // return config for `dev` task
    }

    if (process.env.FESG_ENV === 'build') {
      // return config for `build` task
    }

    if (process.env.FESG_ENV === 'build:dev') {
      // return config for `build:dev` task
    }

    if (process.env.FESG_ENV === 'build:proto') {
      // return config for `build:proto` task
    }
  }
}

imagemin config

Change imagemin settings with the imagemin configuration object.

module.exports = {
  imagemin: {
    svgo: {
      plugins: [{
        // Keep symbols in icon sprites
        cleanupIDs: false,
        removeUselessDefs: false
      }]
    }
  }
}