styleguidist:build removes some HTML classes that are required for styling

Current behavior

Styleguide works great locally when spinning up the development server, but I notice that when I run styleguidist:build some of the HTML classes that are generated by styleguidist are not added to the final build resulting in some elements unstyled like the h1 of the Logo and the Prism.js code highlighting.

Development build

(class rsg--logo-49 exists on the h1 element)

(rsg--jssEditor-61 class and other classes exist to style the code example syntax highlighting)

Production Build

(class missing from h1)

(classes seem missing and code example is unstyled)

This is my styleguide.config.js

const config = {
  theme: {
    fontFamily: {
      base: '"Matter", sans-serif',
    },
    color: {
      base: '#544742',
      sidebarBackground: '#fffbf7',
      link: '#D14010',
      linkHover: '#d14010bf',
    },
    sidebarWidth: 300,
    borderRadius: 0,
  },
  styleguideDir: '../../public/styleguide',
  // Code below can split page into sections
  // Note you will need more than one section to show the section name in the sidebar
  sections: [
    {
      name: 'Layout',
      components: 'src/js/v3/Components/layout/*.vue',
    },
    {
        name: 'Inputs',
        components: 'src/js/v3/Components/utils/inputs/*.vue',
    },
    {
      name: 'Cards',
      components: 'src/js/v3/Components/cards/*.vue',
    },
    {
      name: 'Notifications/Errors',
      components: 'src/js/v3/Components/notifications/*.vue',
    },
    {
      name: 'Lists',
      components: 'src/js/v3/Components/lists/*.vue',
    },
  ],
  title: 'Felix Component Guide',
  components: ['src/js/v3/Account/Components/*.vue', 'src/js/v3/Components/**/**/*.vue'],
  webpackConfig: Object.assign({}, require('./webpack.config.js')),
  copyCodeButton: true,
  skipComponentsWithoutExample: true,
  // Any assets you want to use need to be imported here and need appropriate webpack loaders 
  // Eventually this should be a separate file(s) or array of included assets
  require: [
    path.join(__dirname, './src/scss/app.scss'),
    path.join(__dirname, '/assets/fonts/Matter-Regular.woff'),
    path.join(__dirname, '/assets/fonts/Matter-Bold.woff'),
    path.join(__dirname, '/assets/img/new/back arrow.svg'),
  ],
};

// Add additionnal font loader for font files
config.webpackConfig.module.rules.push({
  test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'themes/pillbox/assets/fonts/',
      },
    },
  ],
});

config.webpackConfig.module.rules.push({
  test: /\.(png|jpe?g|gif|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'themes/pillbox/assets/img/new/',
      },
    },
  ],
});


module.exports = config;

[elevatebart]

I tried to reproduce this issue without success. It is very probably due to the webpack configuration that styleguidist is using.

What framework/library/rendering tool are you using to build and render your library?

Nuxt? Quasar?

It could as well be a 3rd party webpack plugin like purge-css that removes all the “unused” classes in production. If it’s the case, remove this plugin from your webpack config, for styleguidist, and everything should return to normal.

[Eternal-Rise]

setting minimaze: false in styleguide.config.js fixed issue