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
Related
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 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 webpack react project. It runs only webpack, but I want to remove the webpack related matter and run as a normal react project.
webpack is just a bundler. It bundles all your js files and dump that as string in eval function in one single js file.
I Got your question now. I guess, you mean that you have a react project. Its developed now. And you want only the usefule files now, right? If thats the case, you need only two files(primarily for the project). First you build the project with whatever script you have, I guess, npm run build.
Post that, you will see a dist folder at the root.
Inside that dist folder you will find one index.html file and index.js file. Besides this you may want css and assets folder.
Does that answers your concern?
I'm trying to use webpack with my angular-meteor application. Unfortunately the meteor build fails with the following error:
While determining active plugins:
error: conflict: two packages included in the app (pbastowski:angular-babel and webpack:webpack) are both trying to handle *.js
The angular-meteor package has a dependency on pbastowski:angular-babel for ES2015 support, while webpack uses the babel-loader. Any idea how I can avoid this conflict?
This is a Meteor message that will appear when two Meteor packages try to add a Meteor compiler plugin for the same file extension, in this case ".js".
Option 1
Remove webpack:webpack from your project. Do you really need webpack in your Meteor project? Meteor bundles everything for you, so, there is no need to use webpack, as such. If you want to use ES6 modules then consider using pbastowski:systemjs.
meteor remove webpack:webpack
I don't know your reasons for using webpack, but I thought I'd mention this option.
Option 2
You can configure pbastowski:angular-babel to not compile ".js" files by adding the line below to babel.json in your Meteor project's root folder. However, if you do this, Babel will only compile ".es6.js" files and not ".js" files.
babel.json
{
"extensions": ["es6.js"]
}
Some people here are trying to say that Webpack is useless but they really don't know much about it.
It can helps you bundle a lot better your assets.
You can bundle better your CSS and even have local CSS (css that is not applied globally but only in a section of your page)
You can do code splitting and not serve your entire app on the first page load
You can have hot-reloading with no page refresh (at least with React ;))
You can use angular and Webpack together without any problem. Here is what you need to do:
meteor remove angular
meteor add angular-meteor-data
meteor add angular-templates
The only missing piece then is ng-annotate and luckily, there is a few ways. You can use the ng-annotate-loader or ng-annotate-webpack-plugin in your Webpack config file.