N
N
Nikita Nafranets2016-09-28 03:03:59
css
Nikita Nafranets, 2016-09-28 03:03:59

How to make an ignore import in stylus?

There is such a folder

├── header
│   ├── header.pug
│   └── header.styl
└── page
    ├── page.pug
    └── page.styl

Page.styl I have the main file and use gulp to collect all the css through it.
gulp.task('stylus', function() {
    gulp.src('./assets/blocks/page/page.styl')
        .pipe(plumber(configs.plumberError))
        .pipe(sourcemaps.init())
        .pipe(stylus(
            {
                use: rupture(),
                'import': [__dirname + '/assets/vendors/flex-grid-framework.styl'],
                'include': __dirname + '/assets/blocks'
            }
        ))
        .pipe(autoprefixer({
           browsers: ['> 1%', 'last 3 iOS versions', 'Firefox ESR', 'last 2 versions', 'iOS 8.1']
       }))
       .pipe(rename('style.css'))
       .pipe(sourcemaps.write('./'))
       .pipe(gulp.dest(path.public + '/css'))
       .pipe(reload(configs.allowStreamReload));
});

Everything would be fine, but when I try to do Dmitrijs Balcers or @require '**/*', I get a loop error, which is logical, but I can't use any regex in the .styl file itself, so I decided to try passing the settings through gulp.
But trying to do include: '!' + __dirname + '/assets/blocks/page' doesn't help, but I couldn't google the answer.
How to solve the problem? Without transferring the page folder from blocks.

Answer the question

In order to leave comments, you need to log in

4 answer(s)
I
iBird Rose, 2016-09-27
@iiiBird

regular slider. it's just that when the hover is written, flipping the slider
through kenwheeler.github.io/slick can be done using the methods
$('.your-element').slick('slickNext'); and $('.your-element').slick('slickPrev'); when hovering on the necessary elements

V
Vyacheslav Lebedev, 2016-09-27
@slavikse

So write yourself, it will not be difficult and you will raise your skill.
The idea is this:
1. There are 2 layers lying on top of each other (these are position: absolute and 100% width and height and z-index for accuracy)
2. On hover, the transparency of both layers changes and we shift the layer, the one on top, to the left with with transform: transitionX(-400px) and transition: 0.4s
This can be done with pure css

N
Nikita Nafranets, 2016-09-28
@Dimensi

I took a closer look at the documentation ... and found the answer
@import "../../blocks/!(page)/*.styl"

O
Oleg, 2016-09-28
@werty1001

You can use concat instead of rename .

var concat = require('gulp-concat');

gulp.task('stylus', function() {
    gulp.src('./assets/blocks/*/*.styl')
       .pipe(plumber(configs.plumberError))
       .pipe(sourcemaps.init())
       .pipe(stylus())
       .pipe(autoprefixer())
       .pipe(concat('style.css'))
       .pipe(sourcemaps.write('./'))
       .pipe(gulp.dest(path.public + '/css'))
       .pipe(reload(configs.allowStreamReload));
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question