Integrate node-sass-json-importer into an Angular CLI application

Question

Trying to add the node-sass-json-importer into an Angular CLI application.

I was using version 1.0.0-beta.17of the CLI, but haven't been able to figure it out using the current version 1.2 either. After installing it via yarn I don't know where it should be setup in the application configuration.

Has anyone successfully integrated this into their application? The only answer I could find regarding this is for applications using Webpack, but not for the Angular CLI.

Answer 1

Solved this by changing the styles.js

node_modules/@angular/cli/models/webpack-configs/styles.js 

In the above file , edit as mentioned below

const jsonImporter = require('node-sass-json-importer');

and add importer: jsonImporter in the rule for .scss

{ test: /\.scss$|\.sass$/, use: [{
                    loader: 'sass-loader',
                    options: {
                        sourceMap: cssSourceMap,
                        // bootstrap-sass requires a minimum precision of 8
                        precision: 8,
                        includePaths,
                        importer: jsonImporter,
                    }
                }]
        }

This might not be the best solution but solves your issue , there is no option i can see to pass the args to node-sass here in this case it is --importer './node_modules/node-sass-json-importer' ,

as per this link https://github.com/angular/angular-cli/issues/1791 it allows only includePaths option alone.

Hope this helps !!!