Configure CSS as generated asset, not committed to git
- Added public/style.css to .gitignore - Removed style.css from git tracking (git rm --cached) - Enhanced package.json scripts for better CSS workflow: - postinstall: Auto-builds CSS on npm install - build-css:dev: Development build with source maps - start: Now builds CSS before starting server - dev: Builds CSS before development mode - Updated README with CSS development documentation - Explains SCSS organization and build process - Documents all CSS-related npm scripts Benefits: ✅ Cleaner repository (no generated files) ✅ Prevents merge conflicts in generated CSS ✅ Automatic CSS generation on new machine setup ✅ Source of truth is SCSS files only ✅ Consistent build process across environments
This commit is contained in:
parent
23a06a5e84
commit
9716fe9f1d
4 changed files with 31 additions and 7 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
@ -26,3 +26,7 @@ Thumbs.db
|
|||
# Temporary files
|
||||
*.tmp
|
||||
*.temp
|
||||
|
||||
# Generated files
|
||||
public/style.css
|
||||
public/style.css.map
|
||||
|
|
23
README.md
23
README.md
|
@ -29,6 +29,7 @@ A community-driven web application for tracking winter road conditions and icy h
|
|||
```bash
|
||||
npm install
|
||||
```
|
||||
*Note: CSS is automatically built via the `postinstall` script*
|
||||
|
||||
3. **Configure environment variables:**
|
||||
```bash
|
||||
|
@ -38,7 +39,9 @@ A community-driven web application for tracking winter road conditions and icy h
|
|||
|
||||
4. **Start the server:**
|
||||
```bash
|
||||
npm start
|
||||
npm start # Production mode
|
||||
npm run dev # Development mode
|
||||
npm run dev-with-css # Development with CSS watching
|
||||
```
|
||||
|
||||
5. **Visit the application:**
|
||||
|
@ -46,6 +49,22 @@ A community-driven web application for tracking winter road conditions and icy h
|
|||
http://localhost:3000
|
||||
```
|
||||
|
||||
### CSS Development
|
||||
|
||||
This project uses SCSS for styling. The CSS is **generated** and should not be committed to git.
|
||||
|
||||
- **Build CSS once:** `npm run build-css`
|
||||
- **Build CSS (dev mode):** `npm run build-css:dev`
|
||||
- **Watch CSS changes:** `npm run watch-css`
|
||||
- **Dev with CSS watching:** `npm run dev-with-css`
|
||||
|
||||
SCSS files are organized in `src/scss/`:
|
||||
- `main.scss` - Main entry point
|
||||
- `_variables.scss` - Theme variables and colors
|
||||
- `_mixins.scss` - Reusable SCSS mixins
|
||||
- `pages/` - Page-specific styles
|
||||
- `components/` - Component-specific styles
|
||||
|
||||
## Environment Variables
|
||||
|
||||
```bash
|
||||
|
@ -72,7 +91,7 @@ PORT=3000
|
|||
```bash
|
||||
git clone git@github.com:deco/ice.git /opt/ice
|
||||
cd /opt/ice
|
||||
npm install
|
||||
npm install # This automatically builds CSS via postinstall
|
||||
```
|
||||
|
||||
3. **Configure environment:**
|
||||
|
|
10
package.json
10
package.json
|
@ -4,14 +4,16 @@
|
|||
"description": "Great Lakes Ice Report - Community-driven winter road conditions tracker for Michigan",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"dev": "nodemon server.js",
|
||||
"start": "npm run build && node server.js",
|
||||
"dev": "npm run build-css && nodemon server.js",
|
||||
"build-css": "sass src/scss/main.scss public/style.css --style=compressed",
|
||||
"watch-css": "sass src/scss/main.scss public/style.css --watch",
|
||||
"build-css:dev": "sass src/scss/main.scss public/style.css --style=expanded --source-map",
|
||||
"watch-css": "sass src/scss/main.scss public/style.css --watch --style=expanded --source-map",
|
||||
"dev-with-css": "concurrently \"npm run watch-css\" \"npm run dev\"",
|
||||
"build": "npm run build-css",
|
||||
"test": "jest --runInBand --forceExit",
|
||||
"test:coverage": "jest --coverage"
|
||||
"test:coverage": "jest --coverage",
|
||||
"postinstall": "npm run build-css"
|
||||
},
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue