https://github.com/ashirbadgudu/vite-react-typescript-stater

https://github.com/ashirbadgudu/vite-react-typescript-stater

folder-structure gulp reactjs scss typescript vite yarn

Last synced: 8 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ashirbadgudu/vite-react-typescript-stater
• Owner: AshirbadGudu
• Created: 2022-01-02T16:34:13.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-02T16:34:16.000Z (about 3 years ago)
• Last Synced: 2024-11-20T11:07:01.166Z (2 months ago)
• Topics: folder-structure, gulp, reactjs, scss, typescript, vite, yarn
• Language: SCSS
• Homepage:
• Size: 55.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `Vite React Typescript Stater`

## Steps for creating `vite-react-tailwind-css-stater` with `yarn`

### Create a new react project with `vite`

```sh

yarn create vite

```

### Go to project directory and run

```sh

yarn

yarn dev

```

### Install SCSS related packages

```sh

yarn add -D gulp gulp-purgecss gulp-sass sass

```

### Create `gulpfile.js` and write following content

```js

const { src, dest, watch, series } = require("gulp");

const sass = require("gulp-sass")(require("sass"));

const purgecss = require("gulp-purgecss");

function compileSass() {

  return src("src/scss/index.scss")

    .pipe(sass())

    .pipe(

      purgecss({

        content: [

          "./src/**/*.tsx",

          "./src/**/*.ts",

          "./src/**/*.js",

          "./src/**/*.jsx",

          "./*.html",

        ],

      })

    )

    .pipe(dest("src/styles"));

}

function watchSass() {

  return watch(

    [

      "src/scss/**/*.scss",

      "./src/**/*.tsx",

      "./src/**/*.ts",

      "./src/**/*.js",

      "./src/**/*.jsx",

      "./*.html",

    ],

    compileSass

  );

}

exports.default = series(compileSass, watchSass);

```