Sp-dev-docs: Use of referencing the External css

[lovyjain]

In the above document we have referenced the external Jquery UI css. Can not we use CSS installed as a part of node module Jquery-Ui

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 9f5a35c2-9914-fc67-1550-15d4f63c918c
• Version Independent ID: 8418c398-1a93-622d-4df8-84c866fef67f
• Content: Add jQueryUI Accordion to your SharePoint client-side web part
• Content Source: docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md
• Product: sharepoint
• Technology: sharepoint-framework
• GitHub Login: @spdevdocs
• Microsoft Alias: spdevdocs

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[andrewconnell]

Sure... you can but then the CSS is included in the bundle with your component. Referencing external CDN hosted files is a better & more performant approach.

[lovyjain]

Thanks Andrew,
I have couple of more queries.

1. When we install external library as package and then include those in External under config.json. (same like above). Then how they are referenced in the webpart solution. For external libraries they are downloaded bu hitting the URL. Does files under node modules also compiled while packaging the solution.
2. Even if we mark them external, while importing in our webpart file , they are importing from the Node folders only. So the name specified in extenal can be anything. Is it correct.?
3. Is there a difference between loading script from spcomponentloader method and using external files in config.json.?

[msft-github-bot]

Closing issue as "answered". If you encounter similar issue(s), please open up a NEW issue. Thank you.

[andrewconnell]

When we install external library as package and then include those in External under config.json. (same like above). Then how they are referenced in the webpart solution. For external libraries they are downloaded bu hitting the URL. Does files under node modules also compiled while packaging the solution.

Two things:

1. The name of the object added to the exernals collection is used by webpack primarily. Webpack sees that and says "when I see an import statement, I ignore it and don't suck that library into the bundle".
2. The second part of the bundling process generates the SPFx component's manifest file. This contains a list of everything the component needs to run. Everything listed in externals is added to this list. See for yourself... don't put something in externals and run gulp bundle. Look at the JSON file in the ./dist folder. Now, add something to externals that you are using and repeat. Notice the difference.

Even if we mark them external, while importing in our webpart file , they are importing from the Node folders only. So the name specified in extenal can be anything. Is it correct.?

No... see last answer. The name is what webpack is using as it's list of "don't suck these libraries into the bundle"

Is there a difference between loading script from spcomponentloader method and using external files in config.json.?

Yup, stuff defined in config.json is added to the manifest which is used to load all dependencies before the component's bundle is loaded on the page. The SPComponentLoader is a programmatic way to load things at runtime. If your component ALWAYS needs it to run, set it as a dependency. If it's conditional, then SPComponentLoader is an option.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues