https://github.com/kernix13/parcel-sass-setup
Notes on how to setup Parcel instead of Webpack as a bundler, specifically for using SASS in your project.
https://github.com/kernix13/parcel-sass-setup
parcel parcel-bundler sass
Last synced: 8 months ago
JSON representation
Notes on how to setup Parcel instead of Webpack as a bundler, specifically for using SASS in your project.
- Host: GitHub
- URL: https://github.com/kernix13/parcel-sass-setup
- Owner: Kernix13
- Created: 2022-09-05T20:14:46.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T05:55:30.000Z (over 3 years ago)
- Last Synced: 2025-01-05T20:09:30.150Z (over 1 year ago)
- Topics: parcel, parcel-bundler, sass
- Language: SCSS
- Homepage:
- Size: 333 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Setting up Parcel
Notes for using Parcel instead of Webpack as a bundler:
1. Reduces the size of your app
1. No config code splitting / organization
1. Automatic transforms (SASS, JS modules)
1. Hot module replacement
1. Complile SASS to CSS
1. Working with images
1. Way easier than Webpack!
Check out the [Parcel on GitHub](https://github.com/parcel-bundler/parcel) for folders like `.vscode` and `.husky`, and files like `.editorconfig`, `.prettierignore` and `.prettierrc`.
Check the notes in `notes_videos.md` and `notes_parcelDocs.md` for installing and getting started with PArcel.
## Installation and setup
**From Parcel docs**:
```bash
npm install --save-dev parcel
```
- create `src/index.html` and add
```html
```
- In `package.json` add:
```bash
"scripts": {
"start": "parcel",
"build": "parcel build"
```
- run `npm run dev` to run the dev server and `npm run build` to build the production files
**From video notes**:
```bash
npm install --save-dev parcel
npm install --save-dev sass
```
Then:
1. Create a folder named `src` in the root of your project.
1. Create `index.html` in the `src` folder.
1. Create an `scss` folder inside `src` and inside there create `main.scss`.
1. Create a `js` folder inside `src` and inside there create `main.js`.
1. Add `` in the `` tag of the HTML file.
1. Add `` before the `` tag of the HTML file.
1. Then add the following scripts to `package.json` for Parcel:
```json
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
},
```
Installation and setup is nearly identical for the notes from Parcel and the Video notes with the exception of the `package.json` scripts. I changed `"main": "index.js",` to `"main": "src/index.js",` in my `package.json` file, so I think the Parcel scripts are the correct ones. Just double-check the `"source"` and `"main"` values.