1

I have been configuring rollup for creating custom react component library on top of fomantic-ui. I have already setup the rollup.config.js ALthough in the configuration, I need to resolve an import:

@import (multiple) '../../theme.config';

the import is part of fomantic-ui-less library, which needs to be resovled to:

path.join(__dirname, '/themes/theme.config')

and I do have themes/theme.config at my project root. when I run build command it throws following error:

[!] (plugin postcss) Error: '../../theme.config' wasn't found. Tried - E:\Projects\UILibrary\node_modules\fomantic-ui-less\theme.config,..\..\theme.config

and I have used the rollup-plugin-postcss plugin and @rollup/plugin-alias, and called it inside plugins array

...
plugins: [
...
alias({
entries: [
find: '../../theme.config$',
replacement: path.join(__dirname, '/themes/theme.config')
]
})
postcss(),
...
]

I have also tried changing the order of plugins.
And the worst part is, it is working when configuring the storybook, using webpack alias.

.storybook/main.js
webpackFinal: async (config) => {
    config.resolve.alias = {
      "../../theme.config$": path.join(__dirname, "../themes/theme.config")
    }
...
}
Sami Khan
  • 31
  • 1
  • 8

0 Answers0