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.

score 3 · Answer 1 · answered May 11 '18 at 22:59

3

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 !!!

answered May 11 '18 at 22:59

Ampati Hareesh

1,852
1
15
20

Provided the above method , as you don't want to use webpack. And by folllowing above method, your application will run with angular cli command ng serve without errors – Ampati Hareesh May 11 '18 at 23:04
Still holding out my breath that someone figures out a way which doesn't require hacking stuff directly in @angular/cli... but probably the best answer I am going to get :/ – David Mulder May 15 '18 at 07:42
Yeah but looks like they haven't added it yet.....https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts ....in the newer version – Ampati Hareesh May 15 '18 at 08:40
sorry, I'm not on that project anymore so I cannot provide any feedback about the usefulness – subarroca May 16 '18 at 13:31
No problem this might help others :)!! – Ampati Hareesh May 16 '18 at 15:49
Anything new on this front in 2020 ? – BuZz Mar 03 '20 at 15:31
looks like they haven't added yet as per this link https://github.com/angular/angular-cli/blob/d29d40370a8ba1c849db1d3f28daf67961088b26/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts#L135 – Ampati Hareesh Mar 03 '20 at 17:23
it's still the same options, which allows includePaths alone – Ampati Hareesh Mar 03 '20 at 17:24
You can use [`@angular-builders/custom-webpack`](https://www.npmjs.com/package/@angular-builders/custom-webpack) to apply custom Webpack configuration, no need to modify any `node_modules` files which will get reverted after any install or update. Check my answer to @BuZz question [Angular: How to parse JSON variables into SCSS](https://stackoverflow.com/questions/60510735/angular-how-to-parse-json-variables-into-scss/60851939). – Christos Lytras Mar 25 '20 at 16:38

score -1 · Answer 2 · answered May 14 '18 at 15:57

If you use css-loader, You can enable module feature. Enabling that will gives you flexibility to import css just like requiring javascript object. I used for react, You can do the same for angular guess. It is very cool feature you should check this out.

//css 
.app p {
  color: green;
}

//JS
import styles from './app.css';

     <div className={styles.app}>
        <p>{ this.state.count }</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>

https://github.com/webpack-contrib/css-loader https://javascriptplayground.com/css-modules-webpack-react/

-1 This question isn't about React or static css, and doesn't even solve the same issue with React (in React you would have to have your own webpack config where you would configure the sass add on) — David Mulder, May 15 '18 at 07:41

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

2 Answers2

Linked