Giulia Chiola's Blog

How to add generic styles in Vue Styleguidist

Giulia Chiola's photo
Giulia Chiola
·

4 min read

At work, recently we worked on a styleguide project using vue Styleguidist, the Vue little brother of react-styleguidist, and we would like to organize components styles in this way:

  • component specific styles would be inside the [ComponentName].vue file
  • while all generic styles (colors, typography, and so on) would be inside a generic styles.scss file.

The first (bad) idea

If we hadn't been in a Styleguidist app, but in a "normal" Vue app instead, we could have add a sass @import with all our generic styles at the highiest component, the App.vue:

// App.vue

<template>
  <div id="app">
    ...
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="scss">
// generic styles
@import 'styles/styles.scss'
</style>

In this way, all components will have inherited our generic styles.

But in a Styleguidist project we have not such an high-level Vue component 😩

If we would want to import a generic file in that way, we would have to add it into all our components, like this:

// components/MyComponent.vue

<template>
  ...
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

<style lang="scss">
// generic styles
@import 'styles/styles.scss'

// my components custom styles
.c-my-component {
  background: red;
}

...
</style>

Not such a great idea! 🧐

The second (I think good?) idea

Probably there is a better way to do it, but for the moment we'll go with this! 😅

Adding a vue.conifg.js file to the Styleguidist project, we can tell to Styleguidist sass-loader which style content it has to prepend before the actual component <style> content. This can be achieved using sass-loader additionalData option

// vue.config.js

module.exports = {
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        additionalData: `
        @import "assets/styles/styles.scss";
        `,
      },
    },
  },
}

🧨 !important

In these examples I have assumed that we are using SASS (.scss) files and not simple CSS files. The sass-loader node package I mentioned before is already installed in our project because we wrote styles in SASS using the <style lang="scss"> syntax.

⚡️ Bonus tip

Since we have just added the vue.config.js file, we also added my postcss configuration there:

const postcssNormalize = require('postcss-normalize')
const postcssPresetEnv = require('postcss-preset-env')

module.exports = {
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        additionalData: `
        @import "assets/styles/styles.scss";
        `,
      },
      postcss: {
        plugins: () => [
          postcssPresetEnv({
            features: {
              'logical-properties-and-values': {
                dir: 'ltr',
              },
            },
          }),
          postcssNormalize(),
        ],
      },
    },
  },
}

Et voilà! 🇫🇷

With this configuration:

  • component specific styles are inside the [ComponentName].vue file
  • while all generic styles are inside a generic styles.scss file

Please let me know if you found a better way to import general styles in Vue Styleguidist components! 😇

Vue.jsstyleguideSass