Error npm downloading/installing modules

General
1

Hi,

when adding @CssImport my app wont build becuase npm can not download some packages since we have some security blocking in our company (i think this must be the issue, firewall etc).

Does anyone have an idea of how to get rid of this issue? I tried to npm config set registry http://registry.npmjs.org/ but as soon as i cant install npm on my maschine its impossible to run this command.

Also i have tried adding eierslett to my pom to get npm without installation, but this also not worked.

Only solution is: dont use @CssImport, then everything works.

Thanks for your help.

1028 http fetch GET https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz attempt 3 failed with UNABLE_TO_GET_ISSUER_CERT_LOCALLY
1029 http fetch GET https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz attempt 3 failed with UNABLE_TO_GET_ISSUER_CERT_LOCALLY
1030 http fetch GET https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz attempt 3 failed with UNABLE_TO_GET_ISSUER_CERT_LOCALLY
1031 http fetch GET https://registry.npmjs.org/workbox-sw/-/workbox-sw-7.1.0.tgz attempt 3 failed with UNABLE_TO_GET_ISSUER_CERT_LOCALLY
1032 http fetch GET https://registry.npmjs.org/workbox-routing/-/workbox-routing-7.1.0.tgz attempt 3 failed with UNABLE_TO_GET_ISSUER_CERT_LOCALLY
1033 http fetch GET https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-7.1.0.tgz attempt 3 failed with UNABLE_TO_GET_ISSUER_CERT_LOCALLY
1034 http fetch GET https://registry.npmjs.org/workbox-streams/-/workbox-streams-7.1.0.tgz attempt 3 failed with UNABLE_TO_GET_ISSUER_CERT_LOCALLY
1035 http fetch GET https://registry.npmjs.org/workbox-window/-/workbox-window-7.1.0.tgz attempt 3 failed with UNABLE_TO_GET_ISSUER_CERT_LOCALLY

2

What most companies with similar security setups use is a locally installed npm registry (e.g. Verdaccio or JFrog) that provides access to modules that have been explicitly allowed. You might already use something like that for Maven dependencies and the same product might also support npm.

3

Thank you unfortunately we dont have one of this kind of repo

4

@CssImport is somewhat of a legacy feature nowadays. You can instead use the frontend/themes folder for defining application-wide CSS as well as inject styles inside the shadow root of specific components. This functionality doesn’t need npm since it doesn’t need to import the CSS inside the regular frontend bundle. Maybe that might be an alternative for your requirements?

5

Ahhhh that sounds great! I alredy read about the relatively new themeing and will dive deeper, thatnk you!

But AFAIK you then add all css stuff into one css file. Am i right, that i can split css files like “one css file per view” and then import it into the main style?

Do i need to compile the css afterwards?

6

Tried the following:

Created a new View for which i want a own css file (to separate css per view for a better overview)

Then i have created a test.css file which i imported into the styles.css by using @import test.css;

After a restart the css class from test.css is not applied to the component. Am i missing something?

Div div1 = new Div("Div 1");
div1.setWidth("150px");
div1.setHeight("150px");
div1.addClassName("test");

test.css:

.test{
background-color:blue;
}

styles.css:

@import 'test.css';
//other stuff
7

@import 'foo.css'; makes the browser request /foo.css which is typically not what you want since the files from frontend/themes are not available at that kind of URL.

Instead, you need to import using import @import url('./foo.css'); which is then handled by the theming mechanism to include files from within the theme directory.

8

Thank you, it works now. But do you have an idea why the documentation is not mention this?

There they are saying that you need url(‘’) if you want to use an external style sheet

image
image995×1083 58.7 KB

9

That might be a bug in the documentation. I’m asking internally if there’s some other trick that I’m just not aware of but we’ll otherwise just fix the documentation. Thanks for noticing!

10

Now when I tested again, it seems like wrapping in url() doesn’t have any impact and my example works just as well without it. The thing that had an impact is that I had a typo in the file name the last time I tested.

The logic automatically inlines imported files that it can find from within the themes folder whereas the original @import statement is included unmodified if no matching file is found. This works the same regardless of whether url() is used or not.