Is there any way that I export my styles from a package I write to use in my other projects?

Question

I have a package made up by ReactJs, rollup. I used TS in my structure and use .module.scss files to add styles to my components.

but when I build the package in /dist directory, it doesn't have any styles, and I got

    (!) [plugin typescript] src/Header.tsx (1:26): @rollup/plugin-typescript TS2307: Cannot find module '@/Styles/header.module.scss' or its corresponding type declarations.

Here is my rollup.config.js :

    import resolve from '@rollup/plugin-node-resolve';
    import typescript from '@rollup/plugin-typescript';
    import terser from '@rollup/plugin-terser';
    import external from 'rollup-plugin-peer-deps-external';
    import postcss from 'rollup-plugin-postcss';
    import sass from 'rollup-plugin-sass';
    import scss from 'rollup-plugin-scss'

    export default {
        input: 'src/index.ts',
        output: [
            {
                file: "dist/index.js",
                format: 'esm',
                sourcemap: true
            }
        ],
        plugins: [
            external(),
            resolve(),
            typescript({ tsconfig: './tsconfig.json' }),
            postcss({
                minimize: true,
                inject: true,
                use: ['sass','scss']
            }),
            sass(),
            scss({ fileName: 'bundle.css' }),
            terser()
        ]
    }

and also I added

"paths": { "@/Styles/*": ["styles/*"] },

In my tsconfig.json as compilerOptions property.

Answer 1

i used "postcss": "^8.4.39", "postcss-modules": "^6.0.0" and also set my rollup.config file as :

import resolve  from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer'

export default {
    input: 'src/index.ts',
    output: [
        {
            file: 'dist/index.js',
            format: 'esm',
            sourcemap: true,
        },
    ],
    plugins: [
        external(),
        resolve(),
        typescript({ tsconfig: './tsconfig.json', declaration: true, declarationDir: 'dist/types'  }),
        postcss({
            extensions: ['.scss'],
            extract: false,
            modules: {
                generateScopedName: '[name]__[local]___[hash:base64:5]',
            },
            use: [
                ['sass', {
                    includePaths: ['node_modules', 'src'],
                }],
            ],
            plugins: [
                autoprefixer(),
            ],
        }),
        terser(),
    ],

}```