将node-sass-json-importer集成到Angular CLI应用程序中

Question

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

I was using version 1.0.0-beta.17 of 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 !!!

Answer 2

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/