Wie kann ich CSS / JS von JS-Plugins von Drittanbietern in die Storefront integrieren? Das muss wirklich statisch erfolgen, npm etc. geht nicht (und bitte auch nicht in die Template per
@AlexGalax danke, aber *genau das* funktioniert nicht. scss: ok, eigenes .js-modul: ok.
ich brauche aber die einbindung von dritt-js / css, die liegen als minified.css/.js vor und müssen eingebunden werden. npm scheidet leider aus.
Ess seht doch alles in der Doku. Erstelle ein neues Theme als Plugin. Und in der theme.json kannst du das all deine Dateien angeben:
"style": [
"app/storefront/src/scss/plugin.min.css",
"@Storefront",
"app/storefront/src/scss/theme.scss"
],
"script": [
"@Storefront",
"app/storefront/dist/storefront/js/theme.js",
"app/storefront/dist/storefront/js/plugin.min.js"
],
"asset": [
"app/storefront/src/assets"
],
@AlexGalax es geht um ein Plugin, nicht um ein Theme, und es funktioniert eben nicht wie beschrieben
[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski „Moritz Naczenski“) kannst du helfen? ich komme hier wirklich nicht weiter und kann unsere plugins so nicht migrieren
Ein Theme ist auch nur ein Plugin und damit funktioniert es ohne Probleme.
Ohne theme.json brauchst du die js-Dateien doch nur im richtigen ordner unterbringen
For 6.1.0 RC and above the default path where shopware looks for your js files is
Resources/app/storefront/dist/storefront/js.
Und CSS kannst du auch in scss einbinden
By default, Shopware looks in the
/src/Resources/app/storefront/src/scssfolder of your plugin to load abase.scssfile.
dort deine Dateien einbinden
@import 'path/to/custom.min.css';
Wie binde ich CSS von einem node module ein?
@import „~js-year-calendar/dist/js-year-calendar“; funktioniert nicht, weil es versucht das über url() einzubinden anstatt es in die all.css zu kompilieren (siehe auch Shopware Issuetracker
@import „…/…/node_modules/js-year-calendar/dist/js-year-calendar.css“; funktioniert nicht, weil es das im Browser zu https://meineurl.de/theme/node_modules/js-year-calendar/dist/js-year-calendar.css auflöst.
Den Pfad zur css-Datei in der theme.json angeben funktioniert auch nicht, weil das im Browser zum absoluten Serverpfad gewandelt wird.
Ich bin gemäß dem Blogeintrag vorgegangen: Eigene Abhängigkeiten per NPM installieren | Shopware und das Importieren des JavaScripts in meiner main.js ging ohne Probleme. Aber CSS bekomme ich nicht hin.
Was mach ich falsch?
1 „Gefällt mir“
Hi @mson, das Problem hatte ich eben auch, ich verwende jetzt einen hässlichen (aber funktionierenden) Workaround. Statt js-year-calendar ist es bei mir aber Bootstrap 5 (bitte frage nicht, warum ich Teile von Bootstrap 5 inkludieren muss…).
Ich habe mir in meinem Theme die Datei src/Resources/app/storefront/src/scss/external/package.json angelegt und dort installiere ich meine dependencies. Außerdem habe ich eine src/Resources/app/storefront/src/scss/external/.gitignore mit dem folgenden Inhalt:
# make sure node_modules folder isn't ignored on this level...
!node_modules
# ... but ignore everything inside
node_modules/*
# unignore bootstrap stylings
!node_modules/bootstrap
node_modules/bootstrap/*
!node_modules/bootstrap/scss/
!node_modules/bootstrap/scss/*
!node_modules/bootstrap/scss/**/*
Dadurch kann ich es nun wie folgt verwenden:
@import "external/node_modules/bootstrap/scss/functions";
@import "external/node_modules/bootstrap/scss/variables";
@import "external/node_modules/bootstrap/scss/mixins";
@import "external/node_modules/bootstrap/scss/utilities";
@import "external/node_modules/bootstrap/scss/grid";
Ich habe hier noch einen nennenswerten Ansatz über Webpack!
Buildkonfiguration Resources/app/storefront/build/webpack.config.js anlegen:
a)
module.exports = function useSass() {
return {
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
}
};
Diese Variante ist zum Entwicklen ganz praktisch. Der Style Loader injeziert Styletags, jetzt lässt sich zum Beispiel import 'normalize.css' in der main.js hinzufügen und der Style wird beim Laden hinzugefügt.
Da fehlt aber dann noch die Minifizierung für Production!
b)
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // pin to v1.6.2 for webpack4
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); // pin to v1.3.0 for webpack4
module.exports = function useSassWithMinification() {
return {
module: {
rules: [
{
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
plugins: [new MiniCssExtractPlugin()],
};
};
Damit wird der (S)CSS Code der all.css angehängt.
Gleichzeitig hat mir dies auch trotzdem geholfen, das ist auch besser für andere Imports (außer node_modules),
Und CSS kannst du auch in scss einbinden
By default, Shopware looks in the
/src/Resources/app/storefront/src/scssfolder of your plugin to load abase.scssfile.
Schade, das funktioniert leider nicht, ich hatte mir nur eingebildet das CSS am Ende der all.css vorzufinden.
Werde aus Zeitgründen auch erstmal auf den src/scss/external Workaround zurückgreifen statt weiter nach einer echten Webpack Lösung zu suchen.
Nachdem wir jetzt mein Webpack Verbesserungen reverted hatten, sieht die Lösung für uns (mit Shopwares PHP Sass Compiler) so aus:
// src/Bundle/Storefront/Resources/app/storefront/src/scss/base.scss
@import "../../../../../../../../node_modules/glightbox/dist/css/glightbox";
@import "../../../../../../../../node_modules/normalize.css/normalize";
// src/Bundle/Storefront/Resources/app/storefront/package.json
"dependencies": {
"glightbox": "^3.2.0",
"normalize.css": "^8.0.1"
}
// (yarn workspace package, common lockfile, no nohoist)