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
Related
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
I know this question is asked many times in the community. But those all questions are related to projects that are not created using create-react-app CLI.
I have created my app using the create-react-app CLI whose webpack.config.js is placed in the folder node_modules/react-scripts/config/webpack.config.js.
Currently i am importing each scss files with their name. When i used #import "./components/**/*.scss"
It throws an error (Screenshot attached).
Is there any configuration to an app which is created using create-react-app to import all the scss files in one scss file using the global selectors.
My App could compile successfully but without importing any scss file when i use the syntax #use "./components/**/*.scss";
I have a React project created with npx create-react-app where I implemented a handful React Components. I don't really see this project as an "React application", as it's just a personal library of Components I consume in another project, an HTML web application rendered using server-side technologies. My goal is to gradually replace parts of this application with React components. I don't really envision it becoming a single React application, my plan is just to replace the parts I think make sense to be developed with React.
I have no issue implementing these components - I'm using Storybook to organize the independent modules. But I'm struggling with the build process.
If I run npm run build I create a single application, based on the original React application code bootstrapped by create-react-app, which I essentially abandoned in favor of the Storybook setup. If I add the files generated by npm run build my project, I can't get React to render my components properly.
I managed to get a manual build process to work:
In my HTML project I add https://unpkg.com/react#16/umd/react.production.min.js and https://unpkg.com/react-dom#16/umd/react-dom.production.min.js
For each of my React components source files, I run npx babel --presets react-app/prod src/MyComponent.js -o build/mycomponent.js
Then I combine all the npx babel outputs in a single components.js file, adjusting some repeated functions that appear on the top of all files, and suppressing the import and export statements.
I load the component.js file in my HTML project, and I can create my components using plain JS:
ReactDOM.render(
React.createElement(MyComponent, {param: value}, null),
document.getElementById('myComponent')
);
Is there a better process to build my components to a single JS file I could consume in my HTML application?
As you expected, the project should be a reusable module/ UI library (say the name is my-ui) for other projects. I did the similar thing before and just introduce my approach here. First, export the components as normal. Second, create an index.js. Third, import and export those components you exported. Fourth, if you are familiar with webpack, use index.js as the entry in webpack.config.js to bundle the entire project as one file. You can publish this package, or just use it locally.
Then in other projects, import my-ui, you can use any component exported from that module.
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
I am managing a project where I am using Patternlab to manage the front-end styles and components, but would also like to share its SCSS directory on another Angular project that is the actual application.
Both are Git repos so my first thought was to use Git submodules, but being a Git novice I don't know if that's the best use case. I also thought about a private npm module, but not sure if that's right either.
Does anyone have experience sharing a common, version-controlled SCSS directory across multiple projects?
If both the projects can have the same version of SCSS directory all the time, it’s ok to use submodule. But usually we can’t make sure that. So submodule is not a good choice for this situation.
It’s better to manage SCSS directory in a single branch (we call SCSS branch here), when your project need the latest version of SCSS, you can merge SCSS branch into master branch.
Assume you want to share SCSS directory of projectA for projectB, you can use subtree to add SCSS branch for projectB. Detail as below steps (It's also suitable even you are not manage SCSS separately):
For projectA, create a SCSS branch to manage/develop SCSS directory separately (if you want to manage SCSS separately).
In projectB, add SCSS branch of projectA as a subtree:
git subtree add --prefix=SCSS/ <URL for projectA> SCSS
Modify/commit changes for SCSS folder in projectB.
If you want changes for SCSS also used for projectA, you can use:
git subtree push --prefix=SCSS/ <URL for projectA> SCSS
If you want to pull the changes of SCSS from projectA into projectB, you can use:
git subtree pull --prefix=SCSS/ < URL for projectA> SCSS