I'm kind of confused. This is my project structure
installing bootstrap using bower and some file and directory what direction should I follow to using sass in this kind of structure: for example I mean
install grunt
grunt to your project
add sass file what ever your want
...
I see a lot of ways and you know many of them do not match with my project structure. some one said grunt some one else said bootstrap sass and compile your project and more.
this article by css tricks is the MAP
Gulp for Beginners
1-install gulp globally
2-install gulp in your project
note-gulp is very very flexible with paths and project structures
3-you need two folder app-dist
4-add file gulpfilel.js
5-install sass plugin in gulp
6-write a task and run it !
7-just simple ?!!
Related
Is it possible to use webpack to compile a directory of scss files to a directory of css files?
I don't want to use the sass command line tool because it's part of an angular project and with the help of custom builders I can run the webpack script with only ng build
e.g.
- src
- themes
- theme-dark.scss
- theme-light.scss
to
- dist
- themes
- theme-light.css
- theme-dark.css
Hower I think this is currently not possible because webpack seems to need the scss imported in javascript and not in single files and writes the generated files to js and not css.
Is that what I want even possible with webpack or do I need another tool?
You can use Sass compiler to compile scss to css with a single command. Exactly the use-case you are looking for.
sass --watch src/themes:dist/themes
watch will compile on a file change (optional)
I want to customize Bootstrap 4 theme such as colors, fonts, etc..
I read the instructions from Bootstrap website saying that I need to create custom.scss file and import Bootstrap’s source Sass files like this
// Custom.scss
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
I'm new to both Sass and NodeJS and I do not know how to get started with a NodeJS and Sass project.
I went as far as installing NodeJS and Sass on my Mac using brew. I also installed Bootstrap by typing:
npm install bootstrap
This is the most progress I have made. I do not know in which path the bootstrap files are installed when I did the command npm install bootstrap and also I do not know how to bring that Bootstrap installation into my project folder.
Could anyone please provide some information or point me to a resource on how to get started with a NodeJS and Sass project so I can customize Bootstrap 4 theme using Sass.
You have to run the npm install bootstrap command inside your project directory. Bootstrap and its files will then be installed into the directory node_modules/bootstrap inside your project directory.
Now, when placing your custom scss files into this folder, they will be able to access the node_modules directory, in which bootstrap is.
You can then create a custom building pipeline using npm tools for compiling scss files to css. This requires more in-depth knowledge on node.js and NPM, but that is the usual and recommended way of doing it.
If you just want to compile the scss once and work with the css from there without having to use node.js more in depth, you can use packages like scss-compile and then use console commands like node-sass -rw scssFiles -o cssOutputFiles to compile your custom theme once.
I've got my own generators which work like charms.
One thing I'd like to add to them that would make my work faster is to compile stylus file once they have been copied to the new project folder. Is there a way to achieve this with Yeoman without the user being forced to launch grunt after the yo command?
Thank you!
Andrea
Can't you just have the compiled CSS in this case anyway? If the Yo process can install npm dependencies then you should be able to execute a script that will compile the stylus files.
This may seem like a silly question for front end developers, but how do you modify the CSS stylesheets in JHipster? With Gulp, Nodejs, Bower, Boostrap, Sass, Gradle/Maven and Compass all intermingled, some pointers to get started would be appreciated. I'm using Gradle.
Of course, simply modifying src/main/scss/main.scss, doesn't seem to work!
The solution is:
Install gulp - see: https://gist.github.com/aaronwaldon/8657432 and
any missing npm dependencies not mentioned in the article (if gulp fails in #3 below).
Edit src/main/scss/main.scss as required.
Then, in the project root (where gulpfile.js is), and run gulp - for my configuration, we're using Compass, so the "gulp compass" command updated the css.
I'm already using bootstrap.css. But i would like to surcharge the less variables without using bootstrap customize editor.
I would like to add a less file in my project. My project is a simple nodejs project with express and harpejs.
Where to find the less file ? Using express it will compile it when i will deploy the project ?
Thanks.
Look at using bower.
npm install -g bower
bower install bootstrap
You will then find all the less files in bower_components/bootstrap/less/*. Copy the bootstrap.less file to your CSS directory and make alterations (make sure the paths are correct).
You can then look at using some Grunt tasks to get the less to build.