I try to integrate bootstrap with a rollup package but I keep getting several errors. I was wondering if there is a way to make it work, even if I have to change my structure.
Structure:
src/index.ts
import './assets/scss/_main.scss';
import { Table } from './components';
export default Table;
export * from './hooks';
export * from './helpers';
export * from './types';
export * from './constants';
src/assets/scss/_main.scss
// 1. Configuration and helpers
@import './variables';
@import './mixins';
@import '../../../node_modules/bootstrap/scss/bootstrap.scss';
@import '../../../node_modules/bootstrap/scss/bootstrap-utilities.scss';
src/rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import scss from 'rollup-plugin-scss';
import sass from 'rollup-plugin-sass';
const packageJson = require('./package.json');
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'esm',
sourcemap: true
}
],
plugins: [
typescript(),
peerDepsExternal(),
resolve(),
commonjs(),
terser(),
postcss({
modules: true
}),
scss(),
sass(),
image()
]
},
{
input: 'dist/cjs/types/src/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: 'esm' }],
plugins: [dts.default()],
external: [/.css$/]
}
];
The error I usually get is:
[!] RollupError: Could not resolve "./assets/scss/_main.scss" from "dist/cjs/types/src/index.d.ts"