A quick fix for a long-standing problem
only works for the short term.

Dr. Jacinta Mpalyenkana

How to add generic styles in Vue Styleguidist

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! ๐Ÿ˜‡

Edit this page on GitLab
Take me to the next post!