Using Sass in angular 2
[Check edited part at end of this answer in case you are using angular cli]
Explaining how to use sass in 'quickstart seed'(https://angular.io/guide/quickstart)
(https://angular.io/guide/setup#download)
Please follow these simple steps:
Step 1: Setup the quickstart seed
Use the below commands to setup
npm install
npm start
you will see 'Hello Angular' on browser.
Step 2: Install node-sass and sass-loader
Use the commands mentioned below to install
npm i node-sass -S
npm i sass-loader -S
Now you can see both of these added in your 'dependencies' inside 'package.json' file.
Step 3: Create 2 folders for Sass code and Css code
Create two folders with any name in "quickstart-master" folder. In this case for example:
"sass_folder" and "css_folder". Now create a demo file 'demo.sass' and put it inside 'sass_folder'. You can put a simple sass code in this .sass file. It will look like this:
$font-stack: Helvetica, sans-serif
$primary-color: #000
body
font: 100% $font-stack
color: $primary-color
Step 4: Make changes in 'package.json' file
Add scripts to Build and Watch Sass code present in "sass_folder". After compilation, The resulting css code should be stored in "css_folder". After changes the "Scripts" in 'package.json' file should look like this:
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose",
"build:sass": "node-sass sass_folder/ -o css_folder",
"watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
}
Have a look at 'start', 'build:sass' and 'watch:sass' only.
Step 5: Run the application
Now you can run the app by using below command:
npm start
You will see the compiled css code in "css_folder" with the same file name 'demo.css'. It will look like this (In this case):
body {
font: 100% Helvetica, sans-serif;
color: #000; }
Now if you make any change in .sass file it will be reflected to .css file dynamically as the script is watching the code.
If it shows error, Close the .css file when you make any change in .sass file.
Note: For scss code you can follow the same steps. You just have to put .scss file in "sass_folder" in this case.
[edited]
In case you want to use Angular CLI:
At the time of creation of new Angular project use below mentioned cmnds:
For sass:
ng new Demo_Project --style=sass
For scss:
ng new Demo_Project --style=scss
To change the existing style:
ng set defaults.styleExt scss
After this you can use Cli normally.
Angular 2: Scss won't load in production with webpack
SOLVED:
Just import SCSS files instead of use "styleUrls" into the component.
So it works both in developement and production.
import './auth.component.scss';
import '../common/common.scss';
@Component({
selector: 'tep-auth',
templateUrl: './auth.component.html'
providers: []
})
Remarks:
1) In production i created a bundle of Css (see Webpack config)
2) It's necessary to import the bundle into the views as we do with normal css file.
How to add to import SCSS files in Angular 2
1 You create a global styles.scss
file under src
directory.
2 Next you add that file to angular-cli.json
styles array:
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
3 Import all of your .scss files in styles.scss
@import 'styles/colors.scss';
How to use sass-loader in Angular?
Import .scss
file into other .scss
files
You can specify the .scss
inside other .scss
files using the relative path of your file inside the assets path.
Your default assets path should be
"assets": [
"src/favicon.ico",
"src/assets"
]
which is defined in the angular.json
file.
Example:
- You have an
app.component.scss
- Your
theme.scss
file is in./src/assets/theme/theme.scss
Then you would import it inside app.component.scss
like:
@import '../assets/theme/theme.scss';
Specify the style preprocessor option to shorten the import
If you want to shorten the path like you described, you just add the path to the stylePreprocessorOptions
in the angular.json
file:
"architect": {
"build": {
...
"options": {
...
"stylePreprocessorOptions": {
"includePaths": [
"./src/assets/style/theme"
]
},
},
"test": {
...
"options": {
...
"stylePreprocessorOptions": {
"includePaths": [
"./src/assets/style/theme"
]
}
}
}
}
Then you should be able to include your file like @import 'theme.scss';
- For more insights read this: https://github.com/angular/angular-cli/wiki/stories-global-styles
- Official documentation: https://angular.io/guide/workspace-config
- Source that I used: How to short path to file in Angular?
Update after description changed
I suppose you set the wrong relative path. Therefore you need to set the stylePreprocessorOptions
like that:
"includePaths": ["./src/lib"]
in build
and test
After you set this, you can put in any theme file there and like:
./src/lib/theme.scss
and import it like @import 'theme.scss';
Using SCSS with angular library created using angular-cli
Till the date (10-Jan-2019, there is no direct support for global scss in the library even though this is a very common scenario.
From this discussion, I got the workaround that I need to bundle it myself. So I used scss-bundle
to create one big scss file. You can add it using
yarn add scss-bundle@next -D
and then the script to bundle and run in watch mode
"build-lib-watch-styles": "scss-bundle -e \"./projects/lib-name/src/lib/styles/lib-name.scss\" -d \"./dist-lib/lib-name/styles/lib-name.scss\" -w \"./projects/lib-name/src/lib/styles\"",
Related Topics
How to Add Shimmer Effect in CSS
D3Js Svg Open Lines Display a Fill Artifact, How to Fix It
Make a Div Display Under Another Using CSS in a Totally Fluid Layout
CSS Not Loading in Firefox, Opera and Ie - Chrome and Safari Works Just Fine
How to Select Element with Specific Content or Attribute in CSS
Colors in Bootstrap Custom Download
How to Target The Last Column in a CSS Grid
CSS Deprecate Single Class When There Are 2 Classes
Building CSS with Tailwindcss Not Working
Overriding Overflow-X CSS Property on iOS
Shiny Presentation (iOSlides): Custom CSS and Logo Windows 7/8
Card Back Hidden on First Transition in Chrome
Rails - Application.CSS Asset Not Found in Production Mode
What Is The Least Horrible Way to Center an Element with CSS
How Is The Screen Size Measured for Media Queries
How to Make The Elements Cover 100% of The Space Available in a Container Using Flexbox