I'm trying to implement Storybook within an existing project that uses Vuex + Nuxt and Postcss.
I followed these steps:
npx sb init- then
npm i -D storybook-addon-sass-postcss
Started doing the story of a component that doesn't have <style lang="postcss"> and it worked fine, but when it comes to the case of a component <style lang="postcss"> I get the following error
File was processed with these loaders:
* ./node_modules/vue-docgen-loader/lib/index.js
* ./node_modules/vue-docgen-loader/lib/index.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .label {
| display: inline-block;
...
The component
<template>
<label :class="`label ${modifier}`" :for="inputId">
{{ text }}
</label>
</template>
<script lang="ts">
import { Vue, Prop, Component } from 'nuxt-property-decorator';
@Component
export default class Label extends Vue {
@Prop({ default: '' }) modifier!: string;
@Prop({ default: '' }) inputId!: string;
@Prop({ default: '' }) text!: string;
}
</script>
<style scoped lang="postcss">
.label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
color: currentColor;
font-weight: normal;
font-family: var(--base-font-family);
&--block {
display: block;
}
}
</style>
After a few attempts I ended up with my storybook/main.js looking like
("postcss": "7.0.27")
const path = require('path');
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
'@storybook/addon-postcss',
],
"framework": "@storybook/vue",
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.postcss$/,
use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
}
But now I get another error
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/Projects/premium/node_modules/style-loader/dist/index.js:19:24)
@ ./components/atoms/Label.vue?vue&type=style&index=0&id=ef98526a&scoped=true&lang=postcss& 1:0-409 1:0-409
I don't even have getOptions within the component.
I'm very puzzled, I know it's a lot information but I would really appreciate any help.
27/01 - EDIT: I don't get anymore the error TypeError: this.getOptions is not a function at Object.loader it simply disappeared, but first error is still there.