Include angular sass 5

0

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

    
asked by anonymous 02.03.2018 / 01:22

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 have this:

src/
  shared/
    style.scss

When I run 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 on production dependencies, if not from 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 turns sass into css

css-loader transform css to js

style-loader transforms csjs into css again, however now it takes everything and inserts into <style> tags

    
02.03.2018 / 01:39