I created a publishable React library that contains some custom styles. When I use this library (component) within a demo application in the NX project, I do not need to include any CSS styles - they just work.
Now I published this library into my private NPM registry and I want to use this package in a separate application - suddenly my CSS files are not automatically included and I need to include JS files as well as CSS files.
Is there a way to bundle CSS files automatically into a build? So that in my consuming app, all I have to do is to import {MyComponent} from 'my-component'; and there will be CSS files included as well?
thanks
Related
Is there a way to check if any assets in your src folder in your React app are not imported in any components?
To check if there are any assets in your src folder that are not imported in any components, you can use the Webpack Bundle Analyzer. This tool generates a report that shows the contents of your app's bundle, including a list of all the assets that are included.
To use the Webpack Bundle Analyzer, you can follow the instructions in this blog post: https://blog.jakoblind.no/webpack-bundle-analyzer/
Once you have installed and configured the tool, you can run it to generate a report that shows the contents of your app's bundle. You can then use this report to see if there are any assets in your src folder that are not included in the bundle, which would indicate that they are not being imported in any of your components.
Recently, I started working with React js and am interested to learn more about Storybook.
Created custom react storybook typescript library with a roll-up.
It was working fine [with plain .css file] where I consume it until I install styled components into the custom react storybook library after that it is not working well where I use that library [into different project]
But in both cases, it was built successfully in the custom library folder.
custom library's package.json
custom library's package.json
custom library's rollup configuration file.
custom library's rollup configuration file.
It failed with the below-console error when I tried to use it for a different project.
console error in different project
Hello everyone I have a Yarn, Turborepo monorepo. I have 2 Next apps that share some UI components
src
|- apps/ the next js apps
|- packages/ui the UI library
I am unable to add SVGR as I don't have webpack, I use NextJS transpile to get the library into my project. What are my options to import SVGs it my code? I am currently failing during the build
My setup is the same as this
Most of my confusion comes from how the compilation and builds happen with monorepos
Next transpiles the library, but library itself fails during build as SVG files cannot be imported
Basically I am trying to do this
import Star from './star.svg'
In a shared library like this
Do I need to create a react app for this? I am suspecting that I need a more complex setup with proper build step, outputs and entry point for the types
we are creating a custom React package for maintaining components with story-book.
rollup is being used to build the package.
the problem is the build generates from scss to css and once its imported as a package, we cant overwrite the scss variables
I tried to ignore the scss in the build, create a single scss file from all the scss using rollup-plugin-postcss and import it directly in the clients. but we will be forced to write components to have unique class names in non-modular way.
so to summarise, i need to know the best approach and a way to achieve the below steps.
write components with modular scss
have a global scss to hold variables and mixins
can overwrite the scss variables from the client side, where we are using the package
I already have a great project that exports and is easily imported into other projects, and is in a private npm registry.
However, I have sass variables in this project that I would like to use in the consuming project. How do I go about exporting my scss file that has all of the variables so that I can import it into my scss files.
Ideally, something like
#import 'package/scss/colors'
I am currently using rollup and its plugin rollup-plugin-postcss, but am not married to it if there's a better way