I've been immersing myself in react recently and have a question about react+scss.
I understand the difference between babel and webpack and their respective purpose when getting a react app to work in the browser. What I still don't understand is what's needed if I'm just trying to create a react npm package for react components.
My package at first only had a pure javascript/react component and I simply transpiled it with babel to commonJS, worked well. No webpack needed. I then added an additional component that now included scss:
import styles from '../styles/calendar.scss'
In package.json I added
"sass-loader" and "node-sass"
In storybook, everything works, but when I transpile my src directory with babel, the scss/css code is missing, which is obviously expected as babel is just a js transpiler.
My question is whether I really need webpack to get the scss in my react package working or if there is a way to do that purely with babel since so far I had no need for webpack. Babel transpile gave me nicely transpiled js files that still respected the folder structure of my src folder. I ideally don't want a completely bundled index.js file that has all in one.
Bottom line question, do you need more than pure babel as soon as you're dealing with scss?
Any help would be appreciated!
As far as I know, yes. You need more than just Babel if you want to deal with SCSS. The reason is that Babel is JavaScript compiler, which means it only compile JavaScript. For SCSS and other purpose, you need a bundler like Webpack.
Related
I've been trying out different project configurations, and I want to move all babel configuration to webpack config file. Here, I bundled up the demo, but sadly I could not make it run there, but it will work if you deploy it locally (I hope I didn't miss anything). As you can see, the webpack rule for babel from demo.config.js is the same as the contents of babel.config.js file, but when I remove babel file and try to run it, it prompts the following error:
import webpack from 'webpack';
^^^^^^
SyntaxError: Cannot use import statement outside a module
I've seen many different configurations to make it work without babel config file, using ts-loader for example:
What is causing my tsx to render properly without babel in react app?
Demo for React Reload Replacement Plugin
Webpack base configuration for Trezor Suite build package
What am I missing here?
And one more question, is there a way to use TypeScript extension for webpack configuration file demo.config.js?
I'm using Storybook to develop & test my components in isolation. I use typescript, babel, etc.
Everything works like a charm.
Now I want to compile my components as ES5 library (commonJS) and provide it to my other outer projects.
Basically storybook build command makes a whole storybook as a static website but I need the compiled components library.
The main problem here is that the storybook has some dependencies in node_modules that are ES6 modules, so babel configured to proceed them while Typescript handles my own components.
So I can't just use tsc etc. to compile my components eg components folder because typescript won't fetch and compile the dependencies from node_modules. They should be compiled to ES5, otherwise, any of my outer projects, that need to use compiled storybook components, won't be able to handle them.
Also, webpack has it's own aliases, so the whole tools zoo should be used during the deployment.
How to do it in the case of Storybook?
Should I install the webpack, etc. manually into the storybook and configure a deploy process separated of the storybook?
Can I just use the webpack of the storybook? (Because I've already configured it with Babel and Typescript).
Thanks for any help!
An alternative way here - is using babel-cli and only transpile your components as a set of files
Example of the command:
npx babel src -d lib/ --copy-files
The link to the Babel CLI: https://babeljs.io/docs/en/babel-cli
AFAIK, the configuration can include the typescript plugin
Recently I've learned how to add babel to my webpack configuration.
I use react with typescript
I read tons of tutorial and each tutorial did different things
I used awesome-typescript-loader to load typescript. I noticed that without babel, webpack automatically transformed my code from es6 (arrow function) to es5 (which should be the responsiblity of babel).
So my question is that if I config babel, how do I know if my babel works or not?
I am learning React and I have already created a few apps with CRA.
I haven't found a good and easy way to include sass on my react projects so I came up with this:
install node-sass on the src folder
add this to the package.json:
"node:sass": "node-sass src/index.scss src/index.css -w"
then on each component, I would add a sass partial file, so I could keep the style and the js file in the same folder.
is there any problems with doing that?
I've read some tutorials to config webpack to use sass but it sounded to complicated.
Including partials per component is just fine and actually encouraged as a standard. Then you include it in the webpack with the ExtractTextPlugin, which allows you to bundle all your sass files into a single css file that you import in index.html. You can see an example here: https://github.com/ianshowell/react-serverless-kickstart/blob/master/webpack.common.js#L46
For this to work, you also need to include the sass-loader which will let your Js files parse your Sass class names. Feel free to use my starter pack that the above code is linked in to help you figure it all out.
Edit: Also, take a look at this example component to see how importing styles works: https://github.com/ianshowell/react-serverless-kickstart/tree/master/src/components/TodoItem
If you want to use sass in your react app, install chokidar
It will help you:
https://www.npmjs.com/package/react-scripts-sass-chokidar
Create react app v2, support SASS out of the box (https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
Here a link to read the documentation: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
All you need is to install node-sass if not already
npm i node-sass --save-dev
And then make sure you import files with scss extension.
If you need to change old css files, change the extension, and so follow with the imports.
I am currently having trouble with module transpilation with babel.
when I am transpiling code to AMD modules with babel, I can make it work in browser by including requirejs library. But when I try to introduce react to this equation we are experiencing some troubles, as react does not play nice with AMD. we are having mismatch errors (http://requirejs.org/docs/errors.html#mismatch) cause react is loaded synchronously in a vendor.js file.
if I tried the other way around, using commonjs as it is the default module spec that babel uses, I have no idea how to make it work in the browser. without a library like requirejs in the former example, browser is giving errors like "exports not defined". tried to include some stuff like es6-module-loader or babel browerser polyfill, but without much success.
ps: build flow is using broccolijs.
it seems like the answer is in the webpack. after using babel to transpile code to es5 in broccoli, I used broccoli webpack plugin to make transpiled code browser ready.