Innerhalb einer Angular-Anwendung mache ich D3-Visuals entweder über D3 oder Vega . Es gibt auch SCSS-Styling.
Ich möchte in der Lage sein, auf dieselben globalen Variablen für das Styling von Javascript und von SCSS zu verweisen. JSON-Dateien eignen sich sehr gut zum Speichern von Einstellungen, die ich über eine einfache import
Anweisung in Typescript lade . Aber wie geht man bei SCSS vor?
node-sass-json-importer
scheint ein guter Kandidat zu sein, aber das Hinzufügen zu einer Angular 9 CLI-Anwendung ist für mich nicht offensichtlich.
In diesem StackOverflow-Beitrag wurde das Thema vor einiger Zeit behandelt, es wurden jedoch Ressourcen geändert, unter node_modules
denen dies kaum nachhaltig ist.
Es gibt auch einige Eingaben im ursprünglichen Dokument, wie man das Webpack in einer Nicht-Angular-App optimieren kann . Ich weiß nicht, wie ich das mit einer Angular-App in Verbindung bringen soll, die über die CLI erstellt wurde.
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(),
},
},
],
],
},
};
Antworten:
Sie können dies tun, ohne
node_modules
Dateien@angular-builders/custom-webpack
zu ändern, indem Sie benutzerdefinierte Webpack-Regeln einrichten undnode-sass-json-importer
JSON-Dateien in SCSS-Dateien importieren.Sie müssen
node-sass
für dieimplementation
Option installieren, da sienode-sass-json-importer
mit kompatibel istnode-sass
.Installieren von Paketen
@angular-builders/custom-webpack
,node-sass-json-importer
undnode-sass
:Erstellen Sie die Webpack-Konfigurationsdatei (
webpack.config.js
) im Projektstammverzeichnis mit den folgenden Inhalten:Ändern
builder
zu@angular-builders/custom-webpack:[architect-target]
und Add -customWebpackConfig
Optionbuild
,serve
undtest
Build - Ziele innerhalbangular.json
:Jetzt können Sie jede
.json
Datei in jede Komponentendatei aufnehmen.scss
:hello-world.component.scss
::hello-world.vars.json
::Ich habe ein Github-Repository mit all diesen Funktionen erstellt, das Sie von hier aus klonen und testen können: https://github.com/clytras/angular-json-scss
quelle
Eine andere Option ist die Verwendung
raw-loader
. Sie ist standardmäßig in angle-cli verfügbar. Auf diese Weise können Sie eine unformatierte scss-Datei in die ts-Komponente laden:Sie müssen das Modul in der
.d.ts
Datei deklarieren :Dann können Sie alle gewünschten Informationen extrahieren.
Anstatt JSON in scss zu laden, können Sie scss in ts laden.
quelle
Ich habe einen relativ einfachen Ansatz für Sie:
Trennen Sie den
node-sass
Schritt vomng build
Schritt und verwenden Sie die generierten.css
Dateien anstelle dersass
Dateien in Ihrer Winkel-App.Dies hat zwei Vorteile:
Für die Implementierung würde ich wie folgt vorgehen:
./node_modules/.bin/node-sass --importer node_modules/node-sass-json-importer/dist/cli.js --recursive ./src --output ./src
den Skripten in Ihrempackage.json
zB den Namen hinzubuild-sass
. Sie können diesen Befehl so anpassen, dass nur die Sass-Dateien enthalten sind, für die Sie den rekursiven Modus benötigen (ignorieren Sie sie in der Datei angle.json, damit sie nicht zweimal kompiliert werden).npm run build-sass
aus, um die.css
Dateien im Projekt zu generieren ..sass
bis.css
npm run build-sass && ng build
wiecompile
in Ihrer package.json hinzu, den Sie ausführen können, wann immer Sie das gesamte Projekt erstellen möchten.Dieser Ansatz ist zwar relativ einfach, weist jedoch einige Nachteile auf
ng serve
müssen Sie für die Hot-Reload-Funktion von Ihre ausführennpm run build-sass
, um alle Änderungen, die Sie an Ihren Stilen vorgenommen haben, in Echtzeit anzuzeigen.scss
und.css
Dateien für die gleiche Komponente in dem/src
Ordner , von denen die.css
erzeugt wird. Sie müssen sicherstellen (z. B. durch Hinzufügen eines Suffixes oder Kommentars), dass niemand versehentlich das Generierte bearbeitet.css
und diese Änderungen überschrieben werden.Andere Ansätze beinhalten fast immer das intensive Bearbeiten vorhandener oder das Schreiben eines eigenen Webpack-Compilers.
quelle