reactjstypescriptsassrolluprollup-plugin-postcss

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


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.


Solution

  • 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(),
        ],
    
    }```