Import vendor css problems
lmi11 opened this issue · 11 comments
What status of issue with importing plain css from vendor files? I have problems with css from bower_components. It now fixed yet?
My problems:
- Sometimes css from bower_components have tabs and spaces and I have error
Mixed tabs and spaces are not allowed. - Double brackets in dest css-file.
.owl-theme .owl-controls{ {
margin-top: 10px;;
text-align: center;;
}
}
How did you make import?
Problem is that your mix CSS content with SugarSS content.
@ai I tried using postcss-easy-import and postcss-import, but I have the same error.
Problem is that your mix CSS content with SugarSS content.
I understand this and my question - Will you add support of importing plain css to Sugarss in future? Because no sense use Sugarrss without this feature, unfortunately.
SugarSS doesn't need a import. You have some issue with config. Could you show your sources and build tool config.
@ai
Gulp config with styles task:
gulp.task('styles', function () {
var processors = [
postcssEasyImport({extensions: 'sss'}),
autoprefixer({browsers: ['> 1%', 'last 4 version', 'Opera 12', 'Firefox ESR']}),
postcssNested(),
precss(),
cssMqpacker(),
postcssSvg({paths: ['dist/img']}),
postcssAssets({loadPaths: ['dist/img/']}),
postcssFlex(),
];
return gulp.src('src/assets/stylesheets/style.sss')
.pipe(postcss(processors, { parser: sugarss }))
.pipe(rucksack({
shorthandPosition: false,
quantityQueries: false,
alias: false,
fontPath: false
}))
.pipe(rename({ extname: '.css' }))
.pipe(gulp.dest('dist/css/'))
.pipe(browserSync.stream());
});
style.sss:
@import "../vendor/owl-carousel/owl-carousel/owl.carousel.css"
@import "../vendor/owl-carousel/owl-carousel/owl.theme.css"
Files in vendor folder are from Bower and owl.carousel.css file have tabs and spaces. When I'm trying import this file I have error
Mixed tabs and spaces are not allowed.
I can fix this file manually, but it is not good, because it's bower component.
Ok, I changed owl.carousel.css file manually and Import was done, but in compiled css file I have double brackets:
.owl-theme .owl-controls{ {
margin-top: 10px;;
text-align: center;
}
}
Hm, why you use Rustack (it is PostCSS plugin pack) after gulp-postcss? I think Rustack see .sss extension in files and run SugarSS again.
You should put Rustack into PostCSS processors.
@ai It's not problem in Rustack. I removed this from gulp task and I have the same problems...
OK. You have only this styles in app?
@import "../vendor/owl-carousel/owl-carousel/owl.carousel.css"
@import "../vendor/owl-carousel/owl-carousel/owl.theme.css"Show full error stacktrace
@ai I created simple gulp config and recorded video.
https://drive.google.com/open?id=0B_h6btFJGJQsMHNzNjV4VF9jQzA