Demo Meteor project which uses Bootstrap 4, Scss, PostCSS, Npm
This is just a quick test and demo project which uses PostCSS package and some PostCSS plugins to compile Scss provided by Bootstrap 4 from Npm package.
For now with Meteor 1.3 you are not able to import and compile .scss files from node_modules
. Here we use PostCSS and couple of its plugins to be able to install bootstrap from Npm and then import its .scss files from node_modules
folder.
$ git clone https://github.com/juliancwirko/meteor-bootstrap-postcss-test.git
$ cd meteor-bootstrap-postcss-test
$ npm install
$ meteor
package.json
file at 'postcss' key. Here is the list: ["autoprefixer": "^6.3.4", "postcss-easy-import": "^1.0.1", "postcss-nested": "^1.0.0", "postcss-sassy-mixins": "^2.0.0", "postcss-simple-vars": "^1.2.0"]client/main.css
file - yes it should be .css file not .scssclient/main.js
file (ES6 modules).npm install [email protected] --save
fourseven:scss
here!Scss imports and compilation from node_modules
without any additional work. (You can't do this now with Meteor 1.3) Bootstrap here is just a working example, there can be more other libs with styles attached.
This could be also a very good transition from projects based on Scss to full PostCSS stack without preprocessors. I think that Bootstrap will be written in PostCSS in the future too.
Besides Scss and Bootstrap you can use plenty other PostCSS plugins.
I've tried it with Foundation 6 too. Unfortunatelly because Foundation 6 uses complicated mixins structures the PostCSS plugin responsible for sassy mixins can't manage it. We don't use a standard Scss compiler here, so it could be problematic in complicated structures. We use basic stuff like Sass-like variables, nesting, mixins, imports.
This solution will not work in complicated use cases. But I'm sure it could be worked out somehow.
Let me know if you'll find something interesting. You can also comment here in the GitHub issues. I'll try to do some more research too. I'll try to run Foundation 6 from Npm.