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";
Related
I am learning React and don't know the correct way to create config files. I want to have an external configuration file in my React-based project with Vite bundler. As I want to change the configurations according to my wish while using the app and the configuration file should not bundle with my app.
I have created a config.js file in a public folder that didn't work.
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 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 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'm planning to have Codeigniter and Reactjs for my new project,
I need to know how to setup the project folders and the build process
for the .jsx files to be .js and then all the .js files to be
concatenated and minified to be min.js and also using ES6 Style.
I am using NPM, please explain in details.