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

Question

尝试将node-sass-json-importer添加到Angular CLI应用程序中。

我使用的是CLI的1.0.0-beta.17版本，但是使用当前版本1.2也1.0.0-beta.17这个问题。 通过纱线安装后，我不知道应该在应用程序配置中设置它。

有没有人成功地将其整合到他们的应用程 我能找到的唯一答案是使用Webpack的应用程序，而不是Angular CLI。

Answer 1

通过更改styles.js解决了这个问题

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

在上面的文件中，编辑如下所述

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

并在.scss规则中添加importer：jsonImporter

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

这可能不是最好的解决方案但是解决了你的问题，我没有看到将args传递给node-sass的选项，在这种情况下它是--importer'./node_modules/node-sass-json-importer'，

根据这个链接https://github.com/angular/angular-cli/issues/1791它只允许includePaths选项。

希望这可以帮助 ！！！

Answer 2

如果使用css-loader，则可以启用模块功能。 启用它将为您提供导入css的灵活性，就像需要javascript对象一样。 我用过反应，你可以做同样的角度猜测。 这是非常酷的功能你应该检查出来。

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