main.js

const postcssNormalize = require("postcss-normalize")
const path = require("path")

module.exports = {
  stories: ["../src/common/**/*.stories.tsx"],
  addons: [
    {
      name: "@storybook/preset-typescript",
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, "../tsconfig.json"),
        },
      },
    },
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-knobs",
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        "style-loader",
        "css-loader",
        {
          loader: require.resolve("postcss-loader"),
          options: {
            ident: "postcss",
            plugins: () => [
              require("postcss-flexbugs-fixes"),
              require("postcss-preset-env")({
                autoprefixer: {
                  flexbox: "no-2009",
                },
                stage: 3,
              }),
              /*require('postcss-px-to-viewport')({
                viewportWidth: 375,
                unitPrecision: 6,
                selectorBlackList: ['skip-vw'],
              }),*/
              postcssNormalize(),
            ],
            sourceMap: false,
          },
        },
        {
          loader: "sass-loader",
        },
      ],
    })
    return config
  },
}