Include Sass in angular 5

Asked

Viewed 142 times

0

What better way to set up SASS at angular 5, and there is some specific implementation to organize it in the project.

javascript css angular sass

  • with suggestion I ended up arriving at a solution, together with this question https://stackoverflow.com/questions/36220256/angular-cli-sass-options

1 answer

1


npm install node-sass

package json.

"scripts": {
    "node-sass": "node_modules/.bin/node-sass src/shared/css/style.scss -o src/shared/css/"
},

Here in case I got it:

src/
  shared/
    style.scss

When I run in the terminal:

npm run node-sass

I’ll have it

src/
  shared/
    style.css   #gerado pelo node-sass
    style.scss

Sass-Loader

npm install sass-loader --save tip install in production dependencies, if not error.

in your webpack, do this:

model: {
  loaders: [
    {
      test: /\.(scss)|(css)/,
      use: [
        {
          loader: 'style-loader' #ÚLTIMO
        },
        {
          loader: 'css-loader'  #DEPOIS ESSE
        },
        {
          loader: 'sass-loader' #ESSE EXECUTA PRIMEIRO
        }
      ]
    }
  ]
}

Sass-Loader transforms sass in css

css-Loader Transform css in js

style-Loader transforms csjs in css again, but now he takes it all and inserts it into tags <style>

Browser other questions tagged javascript css angular sass

You are not signed in. Login or sign up in order to post.