If I was using Compass to compile SASS partials to CSS, then I could specify input directory (say ‘scss’) and output (again, say ‘css’) in the ruby config.rb file. This is how I used to compile Foundation 5.
Instead I’ve Installed Zurb Foundation 6 using the CLI and am watching and compiling with Libsass (written in C?). It’s really quick, but...
Where is the equivalent config file, to change the default directories?
Related
I have an angular cli project, which packages, runs, and deploys without issue. My problem is, we need to also provide a static CSS file in a separate directory for our CDN deployment (for people using plain html).
So we created an npm script:
sass --scss --sourcemap=none ./client/src/sass/designsystem/designsystem.scss ./dspackage/dist/css/designsystem.css
The problem is that when I run it, it is trying to use Ruby Sass. I get an error:
/usr/local/bin/sass: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory
How can I get it to use node-sass, which is installed correctly both locally and globally?
Before anyone just says to "install ruby sass", I want to compile this css file with the same compiler as the one in our bundle.
This is on OS 10.13.2, angular cli 1.4.4, node-sass#4.7.2
It's the very first time I am using Materialize and I have never been in touch with SASS. I have installed the materialize-sass package using npm install materialize-sass --save. I want to define a color set and compile the CSS file then.
How can I compile my SCSS files after editing the _variables.sccs now so that it will output the CSS file in my public/stylesheets folder?
In the end I have used Koala which is a GUI application for compiling SASS / SCSS files.
Koala App provides GUI (graphical user interface) for automatic compiling of LESS, Sass, Compass and CoffeeScript. It’s also multiplatform as it gets, with clients for Windows, Mac and Linux
I'm developing the language change utility using buttons (<a/> tags) so that the user can change the language if they click the link that contain the label of the corresponding language.
To develop it, I have taken as a reference the QuickStart project of Angular 2, I added AOT and JIT compilation, then I added the ng-xi18n module (JIT version) and finally, I added GULP module for generate files of other languages.
When I compile my project with JIT (using npm run start) and run it, my language change utility works fine.
The problem comes when I compile my project with AOT (using npm run start: aot) and I run it, my language change utility does not work.
Where is the problem?
My project (GitHub Link) has two main.ts and index.html - one for JIT and other for AOT.
I know that could be multiple answers for this question but I would know how i can fast setting up project with Bootstrap and Sass.
I had never used node, npm, grunt or bower, I've installed all already but i can't really find a good tutorial for:
Setting up the project structure
Auto compile sass files on save
(Maybe) Live reload in chrome?
I would suggest not using any boilerplate for your first project as you want to get into the "guts" of it, and once you are familiar with basics, then you can try boilerplate and see what they can do for you.
Few tools you would need to setup a project from scratch includes: Node's npm, Bower, Gulp (for example).
After you have those installed, you can dig in into creating your first project.
1) Initialize your npm project
2) Pull the packages with Bower (Bootstrap scss for starters)
2a) Pull the Specific Bootstrap 3 SCSS port
3) Configure Basic Gulp-scss config for your SCSS needs.
Basic idea behind Bower is that you have unmodified source of plugins/3rd party js/css in bower_components folder, and you use those files to compile a production ready files (js/css). What this means is that your bower_components folder is a "src" folder, and you have to add your "dist" or distributable files. Gulp helps with this part.
For the project structure, further readings and improvements on gulp tasks.
Once you have basic working project, you can try expanding your gulp-config with, like you mentioned Browser Sync and others.
I did compile a "general tasks" gulp file that i use from project to project. You can take a look here and use it if you find it fits.
Hope it helps.
You can try using Aldryn's boilerplate:
https://github.com/aldryn/aldryn-boilerplate-bootstrap3
Documentation
I'm currently using the dojotoolkit and its build system.
I read the new build tutorial for 1.8 at http://dojotoolkit.org/documentation/tutorials/1.8/build/.
In the tutorial it mentions that you can speed up your build by using nodejs.
The build tool itself relies on Java (and, optionally, Node.js for even faster builds), so make sure that have you that installed as well.
But it fails to mention how to do this. Anyone know how this works?
I normally run it like this:
> node dojo/dojo.js load=build --profile myprofile.profile.js --release
This would build a release for the profile contained in myprofile.profile.js. It assumes you are in a directory, which contains both dojo and util as sub-directories. It also assumes that the path to node is set correctly.
If node is not configured in the path variable, you will need to use the full path to node:
> <path to node here> dojo/dojo.js load=build --profile myprofile.profile.js --release
On windows the path is normally C:\Program Files\nodejs\ but you might have to configure it as C:\PROGRA~1\nodejs\ to get it working.
Windows Notes:
The build scripts do not work with Node on Windows (except using Cygwin). If you are using Windows you can get it to work via the following patch:
Windows Patch
Use the attached node-win.patch file to edit the files: util/build/main.js and util/build/transforms/writeOptimized.js. The patch has worked for me 100% of the time and it a simple matter editing a few lines of code.
I've personally found the alternative to Node, using Rhino, useless. It always fails to detect the build paths correctly, no-matter what I set basePath to. I would strongly advise using Node over Rhino as it is more reliable and easier to setup.
The buildscript util/buildscripts/build.sh checks if node is in your path and if so uses it.
This is currently not working under Windows (http://bugs.dojotoolkit.org/ticket/15413).