Package Exports

scss-project
scss-project/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (scss-project) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Create SCSS Folder Structure

scss-project is a command-line tool that helps you quickly set up a ready-to-use frontend project. It creates a clean folder structure with organized SCSS files, along with starter files for HTML, JavaScript, and Gulp tasks. This makes it easy to start building modern websites with a clear and maintainable layout.

🚀 Installation

npx scss-project <project-name>
cd <project-name>
npm i

📦 Features

Creates a structured folder layout for frontend development
Sets up SCSS architecture (base, layout, components, pages, utilities, vendors)
Includes placeholder files like index.js, style.scss, index.html, and gulpfile.js
Automatically writes .gitignore and package.json

📁 Folder Structure Generated

my-scss-project/
├── .gitignore
├── gulpfile.js
├── index.html
├── package.json
└── src/
    ├── fonts/
    ├── icons/
    ├── images/
    ├── js/
    │   ├── index.js
    │   ├── bootstrap/
    │   ├── jquery/
    │   └── owl_carousel/
    └── scss/
        ├── style.scss
        ├── base/
        │   ├── _base.scss
        │   ├── _typography.scss
        │   └── __base-dir.scss
        ├── components/
        │   ├── _button.scss
        │   ├── _dropdown.scss
        │   └── __components-dir.scss
        ├── layout/
        │   ├── _footer.scss
        │   ├── _header.scss
        │   ├── _layout.scss
        │   ├── _main.scss
        │   ├── _navigation.scss
        │   ├── _sidebar.scss
        │   └── __layout-dir.scss
        ├── pages/
        │   ├── _contact.scss
        │   ├── _login.scss
        │   └── __pages-dir.scss
        ├── utilities/
        │   ├── _extend.scss
        │   ├── _function.scss
        │   ├── _icons.scss
        │   ├── _mixins.scss
        │   ├── _utils.scss
        │   ├── _variables.scss
        │   └── __utilities-dir.scss
        └── vendors/
            ├── __vendors-dir.scss
            ├── bootstrap/
            │   └── bootstrap.min.css
            └── owl_carousel/
                ├── owl.carousel.min.css
                └── owl.theme.default.min.css

🧠 How It Works

Parses the project name from CLI input.
Verifies if the target directory exists.
If not, it:
- Creates the full folder tree.
- Writes all predefined file templates.
- Displays progress with chalk-styled output.

📄 License

MIT