Dentro de una aplicación angular, hago visuales D3 a través de D3 simple o Vega . También está sucediendo el estilo SCSS.
Me gustaría poder referirme a las mismas variables globales para diseñar desde Javascript y desde SCSS. Los archivos JSON hacen el truco muy bien para almacenar la configuración que cargo en Typecript a través de una simple import
declaración. Pero, ¿cómo se hace lo mismo desde SCSS?
node-sass-json-importer
Parece un buen candidato, pero agregarlo a una aplicación Angular 9 CLI no es obvio para mí.
Esta publicación de StackOverflow analizó el tema hace un tiempo, pero implicó modificar recursos bajo los node_modules
cuales es apenas sostenible.
También hay algunas entradas en el documento original sobre cómo se puede modificar el paquete web en una aplicación no angular . No sé cómo relacionar esto con una aplicación angular construida a través de la CLI.
Webpack / sass-loader Blockquote
Webpack v1
import jsonImporter from 'node-sass-json-importer';
// Webpack config
export default {
module: {
loaders: [{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}],
},
// Apply the JSON importer via sass-loader's options.
sassLoader: {
importer: jsonImporter()
}
};
Webpack v2
import jsonImporter from 'node-sass-json-importer';
// Webpack config
export default {
module: {
rules: [
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
},
},
{
loader: 'sass-loader',
// Apply the JSON importer via sass-loader's options.
options: {
importer: jsonImporter(),
},
},
],
],
},
};