vcw-scss-layout
v1.0.5
Published
A project setup for SCSS with Webpack
Downloads
6
Maintainers
Readme
VCW SCSS Layout
A project setup for SCSS with Webpack. This project demonstrates how to structure and compile SCSS files using Webpack, along with integrating Bootstrap and Normalize.css.
Table of Contents
Installation
Clone the repository:
git clone https://github.com/Visionary-Code-Works/vcw-scss-layout.git cd vcw-scss-layout
Install the dependencies:
npm install
Usage
Development
To start the development server and open the project in your default browser, run:
npm start
Build
To build the project for production, run:
npm run build
This will compile the SCSS and JavaScript files into the dist
directory.
Lint SCSS
To lint the SCSS files, run:
npm run lint:scss
Run Tests
To run the tests, use:
npm test
Deployment
To deploy the project to GitHub Pages, use:
npm run deploy
Project Structure
vcw-scss-layout/
├── dist/ # Webpack output directory
│ └── bundle.js # Generated by Webpack
├── node_modules/ # Node.js dependencies
├── src/ # Source files
│ ├── scss/ # SCSS files
│ │ ├── abstracts/
│ │ ├── base/
│ │ ├── components/
│ │ ├── layout/
│ │ ├── pages/
│ │ ├── themes/
│ │ ├── vendors/
│ │ └── main.scss
│ ├── index.html # HTML file
│ └── index.js # JavaScript entry point
├── .github/ # GitHub configuration files
│ └── workflows/ # GitHub Actions workflows
│ └── ci-cd.yml # CI/CD pipeline configuration
├── package.json # npm configuration
├── webpack.common.js # Webpack common configuration
├── webpack.dev.js # Webpack development configuration
├── webpack.prod.js # Webpack production configuration
├── webpack.config.babel.js # Webpack Babel configuration
├── .babelrc # Babel configuration
└── .gitignore # Git ignore file
SCSS Structure
- abstracts/: Variables, mixins, functions, placeholders.
- base/: Reset, typography, base styles.
- components/: Buttons, cards, modals, etc.
- layout/: Header, footer, grid system, sidebar, etc.
- pages/: Page-specific styles.
- themes/: Theme styles (dark, light, etc.).
- vendors/: Third-party styles (Bootstrap, Normalize.css, etc.).
Scripts
npm start
: Starts the development server.npm run build
: Builds the project for production.npm run lint:scss
: Lints SCSS files.npm test
: Runs tests.npm run deploy
: Deploys the project to GitHub Pages.
CI/CD Pipeline
This project uses GitHub Actions for CI/CD. The pipeline includes steps for linting SCSS files, running tests, building the project, and deploying to GitHub Pages.
GitHub Actions Workflow
The CI/CD pipeline is defined in .github/workflows/ci-cd.yml
:
name: CI/CD Pipeline
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '20'
- name: Install dependencies
run: npm install
- name: Lint SCSS files
run: npm run lint:scss
- name: Run tests
run: npm test
- name: Build the project
run: npm run build
- name: Deploy to GitHub Pages
if: github.ref == 'refs/heads/main' && github.event_name == 'push'
run: npm run deploy
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Contributing
Contributions are welcome! Please read the contributing guidelines for more information.
License
This project is licensed under the MIT License. See the LICENSE file for details.