I am installing bootstrap and jquery with npm. I want only ( not the sass files ) the jquery and bootstrap files to be installed in web/vendor and not in node_submodules/... Is that possible?
So my symfony structure looks like this
app
bin
composer.json
composer.lock
Gruntfile.js
node_modules
- bootstrap and jquery files are here <<
package.json
src
tests
var
vendor
web
- vendor
- I want my bootstrap and jquery files here <<
Or should I just download bootstrap and jquery and place them myself in web/vendor and forget about node_modules.
See npm local install package to custom location.
Using your approach is fine for a small project, but if you plan on building a more ambitious application, you should really look into using a build tool like webpack, gulp, or grunt. Then you can package up your javascript dependencies from your node_modules into a single file and have it generated into your public js folder.
Related
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.
How can I use preprocessors in my ng2 app? I'm using angular-cli and the original docs are not clear enough for me. Besides, I want to use the styles globally, not only component-wide.
Install your CSS compiler: Search npm for your preffered extension language.
Tested and recommended for SASS: npm install node-sass --save-dev
Add your "to be processed" file to src/assets/css (with the normal file extension, e.g. .sass)
Add the style ref to the index.html file:
<link rel="stylesheet" href="assets/css/whatever.css"> - note the .css file extension.
Update your build file (angular-cli-build.js) with the folder of your "to be processed" files. This object HAS to be placed before the vendorNpmFiles-array.:
sassCompiler: { //(lessCompiler or stylusCompiler)
includePaths: [
'app/assets/css' //Only the folder, not your file!
]
}
Bonus answer: Why don't I use direct paths to files instead of the includePath? Because you may want to use variable files, so it could get really messy with absolute paths!
The Angular CLI has built in support for Sass/SCSS, Less, and Stylus. See here.
As of the Webpack update to the CLI, there are no extra steps other than renaming your stylesheets with the appropriate extension.
For the previous System.js/Broccoli versions, it was also necessary to install the preprocessor packages to your app, like so: npm install node-sass --save-dev.
It will automatically process the stylesheets within and under the src folder.
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 dist folder inside semantic-ui zip file that I downloaded (version 1.8.1 to be precise)
Is this folder the only thing i need to deploy my Web Application as far as semantic-ui related files are concerned?
Would including semantic.js and semantic.css be enough for my web application?
I am asking this question as I want to eliminate the need of installing npm and gulp on my target machines and would just like to copy over the css and js files that are needed by the application.
Including semantic.min.js, jquery, and semantic.min.css will should be enough for the start since the semantic.min.js contains all the modules you'd need. You will find these files in 'dist' folder.
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.