What better way to set SASS in angle 5, and there is some specific implementation to organize it into the project.
What better way to set SASS in angle 5, and there is some specific implementation to organize it into the project.
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
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