Интеграция импортера node-sass-json в приложение с угловым CLI

Попытка добавить импортер node-sass-json в приложение с угловым CLI.

Я использовал версию 1.0.0-beta.17 CLI, но не смог понять ее, используя текущую версию 1.2. После установки через пряжу я не знаю, где она должна быть настроена в конфигурации приложения.

Кто-нибудь успешно интегрировал это в свое приложение? Единственный ответ, который я мог найти в этом отношении, касается приложений, использующих Webpack, но не для Angular CLI.

Ответ 1

Решил это, изменив styles.js

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

В приведенном выше файле отредактируйте, как указано ниже

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

и добавить импортера: jsonImporter в правило для.scss

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

Это может быть не лучшее решение, но решает вашу проблему, нет возможности, который я могу увидеть, чтобы передать args узлу-sass здесь, в этом случае это --importer './node_modules/node-sass-json-importer',

согласно этой ссылке https://github.com/angular/angular-cli/issues/1791, она позволяет использовать только includePaths.

Надеюсь это поможет !!!

Ответ 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/