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