Others

Where to Put JavaScript and CSS in a SharePoint Framework Web Part

Ayan Masood Oct 10, 2026 869 views

Question details

The user wants to know the proper architectural locations for adding JavaScript/TypeScript logic and CSS styling when building a custom component in a SharePoint Framework web part.

Where to Put JavaScript and CSS in a SharePoint Framework Web Part

Product: Microsoft SharePoint Framework (SPFx)
Device & OS: not provided
Scenario: Building a custom user interface component, such as a nested accordion, in a SharePoint Framework project.
Observed behavior: Requires clarity on where to properly place the scripting logic and stylesheets within the scaffolded SPFx project structure.

Before you start

Ensure you have Node.js installed, your SharePoint Framework (SPFx) project is successfully scaffolded, and you have access to a code editor like Visual Studio Code.

Solution 1Recommended

Structuring TypeScript Logic and SCSS in SPFx

Follow the standard SPFx architecture by separating TypeScript logic into the web part class and scoping styles into the SCSS module.

SharePoint Framework encourages using TypeScript instead of vanilla JavaScript, and SCSS modules instead of standard CSS. This ensures better maintainability, scoped styling, and strict typing for your web parts.

Place logic in the TypeScript file

Open your main '.ts' or '.tsx' file (e.g., '[WebPartName]WebPart.ts'). Write your JavaScript or TypeScript logic inside the web part class and its corresponding event-handling methods.

Add styles to the SCSS module

Locate the associated '.module.scss' file in your web part's folder. Write all your CSS/SCSS styles here. The '.module.scss' extension ensures that your class names are scoped locally to prevent styling conflicts across SharePoint.

Update the rendering components

In your 'render()' method or your associated React components, import the SCSS styles and update the HTML or JSX templates to apply your custom classes and trigger your functions.

Structuring TypeScript Logic and SCSS in SPFx

Advanced SharePoint Customization: For highly specific or advanced SharePoint Framework development issues, it is recommended to post your questions on Microsoft Q&A using the 'SharePoint Development' tag.

Free Microsoft Office alternative

Simplify Your Document Workflows with WPS Office

While SharePoint handles complex intranet developments, WPS Office provides a lightweight, seamless alternative for your everyday document, spreadsheet, and presentation needs. Enjoy full compatibility with Microsoft Office formats without the hefty subscription fees.

1. Download the Installer: Visit the official WPS Office website and download the free installation package for your operating system.
2. Install the Software: Run the downloaded installer and follow the simple on-screen instructions to set up WPS Office on your computer.
3. Open and Edit Documents: Launch WPS Office and instantly open your existing Microsoft Office files without losing any formatting or layout.

Fully compatible with Microsoft Word, Excel, and PowerPoint formats (.docx, .xlsx, .pptx).Lightweight installation that runs smoothly on Windows, Mac, and Linux.Familiar, tabbed user interface that requires zero learning curve.Built-in robust PDF editing and conversion capabilities.

microsoft office alternative - wps office

Frequently Asked Questions

Can I use plain JavaScript and CSS instead of TypeScript and SCSS in SPFx?

While it is technically possible to include plain JavaScript and CSS, the SharePoint Framework is heavily optimized for TypeScript and SCSS. Using the default .ts/.tsx and .module.scss files is highly recommended for better maintainability and scoped styling.

How do I reference my SCSS classes in a React-based SPFx web part?

Import your SCSS module at the top of your React component file (e.g., `import styles from './YourWebPart.module.scss';`), then apply the styles to your JSX elements using the syntax `className={styles.yourClassName}`.

Where should I put external JavaScript libraries in my SPFx project?

External libraries should generally be installed via npm and imported directly into your TypeScript files. If you are using a non-module script, you can declare it in the `config/config.json` file under the `externals` configuration section.

Office Quick Solutions