React组件引入第三方框架样式：SCSS环境下本地引入方法问询

Hey there! I get you—moving from CDN-hosted styles to local imports in a React/SCSS setup makes your project more self-contained, and it's totally doable. Here's how to tackle it step by step:

Step 1: Install the Packages Locally #

First, add both libraries as npm dependencies so their files live in your project's node_modules folder. Run this in your terminal:

npm install video.js aos --save
# Or if you use Yarn:
yarn add video.js aos

Step 2: Import Styles in Your SCSS File #

Since you're using SCSS, the cleanest approach is to import these third-party styles directly into your main SCSS file (like App.scss or a dedicated vendor.scss). Use the ~ prefix to tell your bundler (Webpack, which most React setups use) to look in node_modules:

// Import Video.js base styles first
@import '~video.js/dist/video-js.css';

// Then import AOS styles
@import '~aos/dist/aos.css';

// Add your custom SCSS below—this lets your styles override default rules if needed
@import './your-custom-styles.scss';

Alternative: Require Styles Directly in JS #

If you prefer sticking with the require pattern you use for your own styles, you can load the CSS files directly in your root component file (like App.js):

// Load third-party styles first
require('video.js/dist/video-js.css');
require('aos/dist/aos.css');

// Then load your custom styles
require('./App.scss');

Quick Notes #

• Most React boilerplates (like Create React App) come pre-configured to handle CSS files out of the box. If you're using a custom Webpack setup, double-check you have css-loader, style-loader, and sass-loader properly configured.
• Pay attention to import order: putting third-party styles before your own ensures your custom styles can override any default rules from Video.js or AOS when needed.

内容的提问来源于stack exchange，提问作者Ryan