Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
Related
Background
I'm creating a public Node package which consists of some React UI. I'm currently using CSS Modules to scope the styles to the component, and it's all being successfully bundled with Webpack. The bundle outputs a main.css file.
The ask
Since I intend to use this packaged component across many projects with different frameworks, I cannot guarantee that CSS Modules will be available. Thus, I would like to "flatten" the compiled JSX, such that the generated CSS Module classNames are always added at build time, rather than being conditionally added based on whether or not the CSS modules are being imported. From there I should be able to just import the compiled CSS file and call it a day.
What I've found
This tool seems to solve my problem, specifically using CSS Modules. This is not actively maintained though, and I wonder if there's a better solution out there.
https://cef62.github.io/css-modules-compiler/
https://cef62.github.io/css-modules-compiler/quick-start.html
I do wonder if this is doable with some sort of PostCSS routine or a preexisting PostCSS plugin.
I have a component library using storybook & TailwindCSS and a host app that's also using TaildwindCSS itself that imports the component library. When the classes are generated, I'm seeing that they're duplicated:
Both projects import TailwindCSS standardly in their index.css files which is then imported into index.tsx using import "./index.css";:
The host app does generate all the classes from the component library when imported but due to there being duplicate classes, some are being overridden due to the order (pay attention to the source and line numbers in the above image)
The component looks correct on storybook:
Host app:
Looking for advice on how to correctly import the component library within the host app?
UPDATE:
I've figured that the component library generates it's own TailwindCSS classes as expected and that's where the "duplicate" classes (inline) come from and it's being included in a single output in index.js in the dist folder. Still need a way to avoid these duplicates when imported in the host app. May need to look at changing the component library to build a separate .css file with the styles and tell the host app to generate the component library's styles to prevent these duplicates.
After reading more on the TailwindCSS documentation, I've found a resolution. Using the following information from https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries, I was able to fix my issues.
Essentially what I've now done is, on my component library, I ensured that the.css styles are extracted into it's own file and not built into a single index.js. After that, on the host app, I set the content of tailwind config to reference my component library so that it scans the src and generates those classes itself.
In a React app, we usually import CSS files into the JavaScript components.
I thought this way we inject the CSS into the final JavaScript build.
However, it seems that React (at least create-react-app) still generates separate CSS files.
Why is that?
Is there any way to force CSS stylings to be part of the final r? Kind of CSS-In-JS?
You should eject the create-react-app and change webpack config file (style-loader similar question) to not create separate file for css bundle or use html-inline-css-webpack-plugin.
I've installed Styled Components into my Create React App, and everything works fine, but by default, it looks as though the class name it appends to the element isn't based off of the styled component name (ie. MyButton should create an element with the class MyButton-134as23f).
In the Styled Components documentation, it says to install the babel-plugin-styled-components, and then configure the .babelrc file, however, from what I understand, we don't have access to that file until we eject from the app.
So how can I debug styled components while I am developing an app within Create React App?
I was able to find an answer to this:
Because Create React App is a zero-config application, the only way to add anything to the .babelrc file is to eject from React.
Obviously, I wanted to keep all of my tooling, and came across babel-plugin-macro. It's essentially a way for users to run libraries at compile time, without having to configure their Babel file beforehand.
So after installing it to my devDependencies, I then changed the import path to import styled from 'styled-components/macro, and all of the Babel plugin features that you would normally need to eject for came standard with Styled Components.
Let me know if you have any questions or trouble with my answer.
Hope this helps!
I was wondering before starting to do it, if is posible to create a react proyect(i need to do a forum widget) code it on react and the compile it and put the .js output file in other proyect, not with react the other proyects uses php symphony and twig, would be as easy as importing the script and adding a ?
Yes it can be done. The bundle of a react app is a complete js with everything that you need to run it. At the end you only import one js file in your html. I recommend you use a bundler library like webpack or browserify to generate a minified bundle and apply other functionality before creating the final bundle.