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

【问题标题】：Integrate node-sass-json-importer into an Angular CLI application将 node-sass-json-importer 集成到 Angular CLI 应用程序中
【发布时间】：2017-05-06 18:33:09
【问题描述】：

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

我使用的是 CLI 版本 1.0.0-beta.17，但使用当前版本 1.2 也无法解决。通过 yarn 安装后，我不知道应该在应用程序配置中的哪个位置进行设置。

有没有人成功地将它集成到他们的应用程序中？我可以找到的 only answer 是针对使用 Webpack 的应用程序，而不是针对 Angular CLI。

【问题讨论】：

标签： javascript angular sass angular-cli node-sass

【解决方案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-进口商'，

根据此链接https://github.com/angular/angular-cli/issues/1791，它只允许单独使用 includePaths 选项。

希望对你有帮助！！！

【讨论】：

提供了上述方法，因为你不想使用 webpack。按照上述方法，您的应用程序将使用 angular cli 命令 ng serve 运行而不会出现错误
仍然屏住呼吸，有人想出一种不需要直接在 @angular/cli 中破解东西的方法......但可能是我将得到的最佳答案：/
是的，但看起来他们还没有添加它.....github.com/angular/devkit/blob/master/packages/angular_devkit/… ....在较新的版本中
抱歉，我不在那个项目上了，所以我不能提供任何关于有用性的反馈
没问题，这可能对其他人有帮助:)！！

【解决方案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/

【讨论】：

-1 这个问题与 React 或静态 css 无关，甚至没有解决与 React 相同的问题（在 React 中，您必须拥有自己的 webpack 配置，您可以在其中配置 sass补充）