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.
Thesass-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! ๐
Top comments (0)