Storybook + Vuex + Nuxt config + Postcss... How to make them work together?

Viewed 342

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.

0 Answers
Related