Shopware 6 add styles from npm package

Question

How can I use an external npm library in my theme to use it in the storefront?
To give an example, how would you include https://www.npmjs.com/package/slick-carousel? This gives JS- and SCSS/CSS-files inside node_modules. I know that there is an included slider with tinyslider that one could use, but the question is more about including and using the external ressoures. I couldn't find any guide/documentation about such a case unfortunately.

Paradisiacal

See also: #72896964 – Flattish

Answer 1

We found a solution to import styles from NPM packages.

storefront
├── build
│   └── webpack.config.js
├── dist
├── node_modules
│   └── @my-organisation
│       └── my-package
│           └── dist
│               ├── style.css
│               └── script.js
├── package-lock.json
├── package.json
└── src
    └── scss
        └── base.scss

In your base.scss you now can import the styles like this:

@import "../../node_modules/@my-organisation/my-package/dist/style"

The important part for CSS-Files is, that you don NOT specify the file-extension in the import, otherwise the import-statement will count as a regular CSS-import, see https://sass-lang.com/documentation/at-rules/import#importing-css

In addition to importing .sass and .scss files, Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS @import.

Paradisiacal

Answer 2

Please see the documentation regarding adding NPM dependencies.

Economy

Thanks, but this only shows how to use the JS-part of the package, not the SCSS/CSS-part. Is there any documentation on this, too? – Paradisiacal

This isn't documented but in theory you should be able to import from vendor packages in scss using the alias as well. To use the example from the documentation: @import '~vendor/@missionlog/dist/css.min'; – Economy

Answer 3

You need to import the scss/css within your plugins base.scss (f.e.) We are copying the css as scss withing install of package.json into the Resources/src/scss-Folder to have it easier to import it.

Borges

I assume you use a custom postinstall-script for this, correct? – Paradisiacal

Yes, this is correct :-) – Borges