How can I tell to Nest.JS to compile my SCSS files from assets into CSS format?
I have wrote this into nest-cli.json
:
{
"collection": "@nestjs/schematics",
"sourceRoot": "src",
"compilerOptions": {
"assets": [
{
"include": "./assets/**.scss",
"outDir": "./assets/",
"watchAssets": true
}
]
}
}
But SCSS files are being copied without a conversion and I have no idea how to achive this.
Looks like Nest itself does not have the required tools, but you can compile SCSS to CSS with your script.
To do this you need to install node-sass
and concurrently
to run it with Nest together:
npm i --save-dev node-sass concurrently
Then go into package.json
and modify scripts
section: add tasks for SASS compilation and inject them into main build tasks:
scripts: {
// ...
// Add:
"css-once": "node_modules/node-sass/bin/node-sass src/css/style.scss assets/style.css",
"css-watch": "npm run css-once && node_modules/node-sass/bin/node-sass src/css/style.scss assets/style.css --watch",
// Modify:
"start": "npm run css-watch && nest start",
"start:dev": "concurrently --kill-others \"npm run css-watch\" \"nest start --watch\"",
"start:debug": "concurrently --kill-others \"npm run css-watch\" \"nest start --debug --watch\"",
"start:prod": "npm run css-once && node dist/main",
}
Note, that there are two different tasks for initial CSS compilation and for watching changes because node-sass
in watch mode won't compile SCSS initially.