I am using Angular CLI for Angular2 project. And I am using less for my styling.
To compile less file with Angular CLI, I have to import less file with its absolute path. Which breaks editor's intellisense. So instead of using LESSPlugin comes with AngularCLI, I want to use IDE's less watcher and compiler (available in vs code as well as webstorme) to compile less to css.
But there are less files still exists in source, 'ng serve' try to compile less and that breaks the build.
Is there any way to configure angular cli to ignore less file and use available css in source folder?
I manage to do that by uninstalling less module from project using 'npm uninstall less --save-dev'
Now I can use relative path for less import and also intellisense is working now.
When you generate a new project using angular cli, type a command like below:
ng new new-project --style less
It will setup your project using less. When you serve(run) the project each time, angular cli will automatically compile your less files.
According to ng command manual
ng new <options...>
--style (String) (Default: css)
Related
I'm developing with vue.js and vue cli 3. Currently I handle my CSS styles with SASS and compile them with Koala-app. At the moment I am still using it because it is very easy to configure the main.scss and their respective files, and then compile it with autoprefix, in compressed format and with source map to another folder with the name styles.css, I keep the following structure:
I need to replace koala with NPM SASS Loader, how do I replicate this same configuration with VUE CLI 3? The information for the webpack should be added in vue.config.js? Or where? and what would be the parameters to achieve the same effect?
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'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.
I have scss and css files in ASP.NET project.
If I change scss, should be css be regenerated? If yes, then how? VS can do this or should I have some other tool?
There are extensions that allow you to regenerate from inside Visual Studio, but I personally prefer the command line way.
sass --watch [folder holding .scss files]:[folder holding .css files]
If you use Compass, you can use this command instead:
compass watch
Both of these commands will tell Sass to watch the folder with the .scss files, and any time they're changed and saved, regenerate the CSS files.
If you created the project, then you likely already have Sass (and, by extension, Ruby) installed. If you don't, you'll need to install Ruby and Sass. Windows has a nice little installer that installs both Ruby and RubyGems. Once it's installed, you'll need to run the following to install Sass:
gem install sass
Once Sass is installed, you can either run the sass --watch command, or use a VS extension of your choice to watch and recompile the CSS files.