Does anybody knows how to include compass in an Ionic 2 project?
I have tried to import compass-sass, but I can't find a path to set the compass preprocessing in my styles.
As pointed by this stackoverflow answer use this Compass lib
How i implemented in my Ionic 2+ project.
Installed via npm - npm install compass-sass-mixins
Imported to my project by adding #import "../../node_modules/compass-sass-mixins/lib/compass"; in file app.scss
Then run ionic serve
Hope this helps to implement useful mixins
Related
What is the workflow of installing and using any js/css library using npm in laravel 8. What steps should I follow?
For an example let's say I want to install fontawesome using npm and use it in my laravel project. What I know is, once I run the npm install --save #fortawesome/fontawesome-free command it creates a folder for that inside node_modules.
I don't know what should I do after npm install --save #fortawesome/fontawesome-free.
How can I get to know what to do inside resources/css/app.css and webpack.mix.js and what next for any js or css library?
You can use laravel mix, based on my experience the general step to use any css / js package from npm to laravel mix is :
npm install.
import the css needed by the library to resources/sass/app.scss
require js script needed by the library to resource/js/bootstrap.js
npm run development or npm run production to rebuild the app.css and bootstrap.js.
For fontawesome you can read further in this tutorial:
https://dev.to/dendihandian/adding-font-awesome-to-laravel-the-laravel-mix-way-4ndj
While I was learning SASS, I have learned how to install SASS and dev-dependencies using npm package.
Now I want to work on my own project, so how should I work with SASS ?
Do I have to install SASS again ?
If not then how to use existing sass in my project and also the other dependencies like concatenation, auto pre-fixer. Especially when they are updated.
I have installed Foundation via Bower, and I can use the default foundation.css fine by setting it as main in bower.json, and then it's included in the html automatically. So, now I want to theme my Foundation stuff, but I'm not sure how to do the scss stuff with compass and grunt and all that. How do I accomplish this?
It would be nice to be able to just have foundation work with compass and all that.
Help would be greatly appreciated!
EDIT:
I added this to my bower.json in the foundation package:
"main": [
"scss/foundation.scss"
],
And then grunt adds the bower scss import and I manually added my settings files. I have the following in main.scss:
#import "foundation/settings";
// bower:scss
#import "foundation/scss/foundation.scss";
// endbower
I am importing the settings file and the foundation.scss file and I get no errors, but I don't see any of the styles on the screen at all. Any ideas?
This was related to the bugs with the new version of Sass and Foundation. To fix I had to do:
bower uninstall foundation
Then manually go into bower.json in the root of my project and tell it I wanted Foundation 5.4.3 like so:
"foundation": "zurb/bower-foundation#~5.4.3"
Then just do a bower cache clean and a bower install and it should work again.
I have all the correct packages installed and have SASS running. Now I just need to figure out how to start a project with it. Are there any pre-built templates that show you the file structure, etc...Any help would be great!
An easy way would be to install Compass (http://compass-style.org/) and then it's a simple as running:
compass create project-name
Which would create the structure for you.
And then to compile
compass watch
More can be seen here http://thesassway.com/beginner/getting-started-with-sass-and-compass
I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.