I have my SCSS files in assets/styles/ and config.rb relative to the project root. My build process allows the user to create any arbitrary build directory and build from there. So I'd like to be able to do this (starting from the project root):
$ mkdir build
$ cd build
$ compass compile ../
And I would like this to generate the CSS files in build/styles/. Of course, I don't want to hardcode the build directory in config.rb. Instead, I want to set css_dir relative to the directory I'm running compass from. Unfortunately, Compass seems to treat everything relative to the project root.
Is there any way to achieve this?
Related
in qmake I have
REPC_SOURCE = rpc/SomeRPC.rep
and it generates rep_SomeRPC_source.h in the root of the project. I would like to store it somewhere else to keep root as clean as possible.
Documentation says repc creates the rep_SimpleSwitch_source.h header in the build directory that you specify. But how to specify build directory?
The only option I see is to change OUT_PWD, but documentation says Do not attempt to overwrite the value of this variable.
The build directory is the folder where you run qmake (in your case it seems to be the project folder) causing the unwanted effect of obtaining a folder with the source code, intermediate files and binaries.
Instead use a different folder where you run qmake:
mkdir build
cd build
qmake /path/of/project-directory
make
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
I am currently trying bootstrap and attempting to use grunt to process my less source files and generate my css.
I have achieved this by installing bootstrap and grunt via npm and then copying the generated bootstrap folder over to my project folder.
myproject/bootstrap
I have then run npm install to setup grunt based on the bootstrap package.json.
Once the install has completed the boostrap directory contains over 20 thousand files.. is this normal?
I also wanted to change the directory from dist...to a css directory within the myproject folder so my dir structure would look something like this
myproject/src/bootstrap - All the src grunt/less files would go here.
myproject/public/css/ - This would be the new dist directory for the resultant css files.
However I have attempted to adjust the Gruntfile.js in order to change the dist directory... but there I have not manged to get it to export to anything outside of the source bootstrap directory?
I have a complex folder tree where every folder contains several SCSS files. I want to compile them into CSS recursively, all at one time. What command line tool and parameters should I use to do that?
Try using the --watch option with the sass command like so: sass --watch directory this will compile and watch the source files for changes.
If I install any grunt plugin, it is added to a folder named "node_modules" in the root of my project dir per default.
My question: is it possible to move this whole folder (and therefore all plugins) to another location (but still within my project folder), let's say to "build/node_modules" ?
Of course, I still want to be able to run grunt from anywhere in my project hierarchy after this change.
Nope, that's a feature of the Node.JS core files. In the case you don't know, Node.JS is the platform which Grunt was built.
All require() calls which don't point to an absolute file or start with ./ will try to find modules inside node_modules folders.
You can use symbolic link ln -s /original_node_modules_path/node_modules ./node_modules