Gulp-compo-sass NPM

gulp-compo-sass

Gulp plugin for using the Sass preprocessor in CompoJS

Install

npm i gulp-compo-sass -D

Using

const compoSass = require('gulp-compo-sass')

function components() {
  return gulp.src('src/components/**/*.htm')
    .pipe(compoSass()) // SCSS Syntax
    .pipe(concat('components.htm'))
    .pipe(gulp.dest('dist'))
}

// or

function components() {
  return gulp.src('src/components/**/*.htm')
    .pipe(compoSass(true)) // SASS Syntax
    .pipe(concat('components.htm'))
    .pipe(gulp.dest('dist'))
}

Example

SCSS Syntax

<c-component1>
  <h1>
    <span>${ message }</span>
  </h1>
  
  <div>Повседневная практика показывает, что реализация намеченных плановых заданий представляет собой интересный эксперимент проверки модели развития.</div>

  <style>
    h1 {
      span {
        color: red;
      }
    }
  </style>

  <style>
    div {
      padding: 15px;
      background: #ddd;
    }
  </style>
    
  <script>
    this.message = 'Компонент 1'
  </script>
</c-component1>

SASS Syntax

<c-component1>
  <h1>
    <span>${ message }</span>
  </h1>
  
  <div>Повседневная практика показывает, что реализация намеченных плановых заданий представляет собой интересный эксперимент проверки модели развития.</div>

  <style>
    h1
      span
        color: red
  </style>

  <style>
    div
      padding: 15px
      background: #ddd
  </style>
    
  <script>
    this.message = 'Компонент 1'
  </script>
</c-component1>