A project setup for SCSS with Webpack, integrating Bootstrap and Normalize.css, with CI/CD for linting, testing, building, and deploying to GitHub Pages.
MIT License
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.
Clone the repository:
git clone https://github.com/Visionary-Code-Works/vcw-scss-layout.git
cd vcw-scss-layout
Install the dependencies:
npm install
To start the development server and open the project in your default browser, run:
npm start
To build the project for production, run:
npm run build
This will compile the SCSS and JavaScript files into the dist
directory.
To lint the SCSS files, run:
npm run lint:scss
To run the tests, use:
npm test
To deploy the project to GitHub Pages, use:
npm run deploy
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
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.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.
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 }}
Contributions are welcome! Please read the contributing guidelines for more information.
This project is licensed under the MIT License. See the LICENSE file for details.