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

Question

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

我正在使用CLI的版本1.0.0-beta.17，但是使用当前版本1.2也没有弄清楚。安装后，我不知道在应用程序配置中应该设置在哪里。

有人成功地将其集成到他们的应用程序中吗？我找到的唯一答案是针对使用Webpack的应用程序，而不是Angular CLI。

- subarroca

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,
                    }
                }]
        }

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

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

希望这可以帮助!!!

- Ampati Hareesh

---

提供上述方法，因为您不想使用webpack。 通过遵循上述方法，您的应用程序将在使用Angular CLI命令ng serve时无错误运行。 - Ampati Hareesh

仍然屏息以待，希望有人发现一种不需要直接在 @angular/cli 中进行黑客攻击的方法......但可能这是我能得到的最好答案 :/ - David Mulder

是的，但看起来他们还没有添加它.....https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts ....在新版本中。 - Ampati Hareesh

抱歉，我已经不在那个项目上了，所以无法提供有关其有用性的任何反馈。 - subarroca

没问题，这可能会帮助其他人 :)!! - Ampati Hareesh

Answer 2

如果您使用css-loader，您可以启用模块功能。启用此功能将使您能够像要求JavaScript对象一样导入CSS。我用于React，您也可以为Angular尝试同样的方法。这是一个非常酷的功能，您应该去了解一下。

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

- xdeepakv

---

-1 这个问题与React或静态CSS无关，甚至不能解决React中的同样问题（在React中，您必须拥有自己的webpack配置，其中您将配置Sass插件）。 - David Mulder