CODEWITHSUNDEEP
cssangularwebpacksass
Arun Raj R
Arun Raj R

Reputation: 2317

How sass works with webpack in angular4?

Can we refer sass file instead of css file directly in the index.html?

If it is possible, how does the webpack compile sass into css file? Also, which is the best way to bundle the sass file while building the application?

I am using the following versions:

webpack(3.5.5), angular/cli(1.4.1) and angular4

My folder structure is like this,

src
├--- assets
|    ├--- sass
|    |    ├--- common.scss
|    |    ├--- base.scss
|    |    ├--- coustom.scss
|    ├--- css
|         ├--- common.css
|         ├--- base.css
|         ├--- coustom.css
|
├--- index.html
├--- .angular-cli.json

Upvotes: 0

Views: 97

Answers (1)

Aniruddha Das
Aniruddha Das

Reputation: 21698

First of all browser does not understand scss ot less. so you have to compile then and convert them to css while running in your browser.

As you are using angular cli there is a pretty sumple way to do that and no configuration required.

new cli project

so while generating you project you can pass a flag to tell cli to choose scss instead of css.

ng new projectname --style scss

existing project

If its an existing cli project you can edit .angular-cli.json file to change from css to scss.

first your style need to scss

  "styles": [
    "/asset/scss/common.scss",
    "/asset/scss/base.scss",
    "/asset/scss/custom.scss",
    "/asset/scss/common.css",
    "/asset/scss/base.css",
    "/asset/scss/custom.css",
    "styles.scss"
  ],

and the default style is scss

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

For external js libraries you you add a script block and add your scripts there. it will automatically added to your build.

  "scripts": [
    "../node_modules/jquery/dist/jquery.js"
  ],

Upvotes: 1

Related Questions