The boostrap PostCSS version
-
Hangs issue with webpack and sass webpack/webpack-dev-server#128
-
"Bootstrap 5 will likely be in PostCSS", but when? http:https://www.reddit.com/r/webdev/comments/33pnod/oh_btwbootstrap_4_will_be_in_scss_and_if_you_care/
-
PostCSS sounds cool
Current bootstrap SASS version converted to PostCSS is a vailable in /assets To convert a new version, update the bootstrap-sass version and run npm start
Some plugins will be required to use boostrap-postcss:
- postcss-import
- postcss-mixins
- postcss-nested
- postcss-simple-vars
- postcss-color-function
Don't forget adding them
This project is work in progress and not all boostrap sass usage supported (@extend, if, twbs-font-path)
For example, you should remove the @at-root and @font-face directives of glyphicons.css to don't have error. Of cours Glyphicons don't works.
@at-root {
@font-face {
font-family: 'Glyphicons Halflings';
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}
}- @extend .className
- @at-root
- twbs-font-path
- format
- math expression (14px * 1.5), floor(14px * 1.5), (floor(ceil((14px * 0.85)) * 1.5 ) + (5px * 2) + 2)
- if
- ...