Vue 3 Storybook Scss and Tailwind Configuration

Viewed 1311

I want to use Storybook in combination with Vue 3, SCSS and TailwindCSS.

I achieved to configure storybook that TailwindCSS is loading but it fails loading the appropriate component style.

In the .storybook Folder I added the following webpack.config.js:

const path = require('path');

module.exports = ({ config, mode }) => {
    config.module.rules.push({
        test: /\.scss$/,
        use: [
            require.resolve("vue-style-loader"),
            require.resolve("css-loader"),
            require.resolve("sass-loader")
        ],
    });

    config.module.rules.push({
        test: /\.(css|scss)$/,
        loaders: [
            {
                loader: 'postcss-loader',
                options: {
                    sourceMap: true,
                    config: {
                        path: './.storybook/',
                    },
                },
            },
        ],

        include: path.resolve(__dirname, '../storybook/'),
    });

    return config;
};

In the preview.js File in .storybook Folder I added the "Global" CSS to initialise Tailwind. (works fine tho)

import '../src/index.css'
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

And I added a postcss.config.js in the .storybook Folder.

var tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        require('postcss-import')(),
        tailwindcss('../tailwind.config.js'),
        require('autoprefixer'),
    ],
};

This setup is able to show / build stories but without the corresponding Vue Component Style.

An example component which I wanna preview in storybook is "Fact.vue".

<template>
  <div class="fact"><slot /></div>
</template>

<script>
export default {};
</script>

<style lang="scss">
@use "./src/scss/atoms/fact.scss";
</style>

As you can see I @use the corresponding style

fact.scss:

.fact {
  @apply font-bold text-4xl;
}

But how can I make sure that the style of the component is loaded correctly? According to Google Inspector, the @apply is not resolved correctly.

0 Answers
Related