javascript原生不支持import非js资源，真正起作用的是webpack、vite等构建工具及其loader/插件；它们在编译时将css、图片等处理为可导入模块，返回url或内联内容，浏览器原生es模块仅支持.js/.mjs/.json。
JavaScript 本身不支持直接用 import 导入 CSS 文件或图片等静态资源——这是模块系统（如 ES 模块）的限制。真正起作用的是构建工具（如 Webpack、Vite、Rollup）或打包器的加载器（loader）/插件，它们在编译时处理这些非 JS 资源，并让 import 语句“看起来”能导入样式和图片。
导入 CSS / SCSS / LESS 样式文件
在支持 CSS 模块化的构建环境中（如 Vite 或配置了 style-loader/css-loader 的 Webpack），你可以这样写：
-
import './style.css';—— 触发样式注入（通常会动态插入<style></style>标签） -
import styles from './Button.module.css';—— 启用 CSS Modules，返回类名映射对象（如{ primary: "Button_primary_abc123" }） -
import './index.scss';或import './theme.less';—— 需对应配置 Sass/Less 加载器
⚠️ 注意：纯浏览器环境（无构建工具）下，import './xxx.css' 会报错，因为浏览器原生 ES 模块只识别 .js、.mjs 或 .json。
导入图片、字体、SVG 等静态资源
现代构建工具通常将静态资源视为“模块”，导入后返回其解析后的 URL（或 base64 字符串）：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
import logo from './logo.png';→ 返回类似'/assets/logo.abc123.png'的公共路径 -
import icon from './icon.svg';→ 可能返回 URL，也可配置为内联 SVG 字符串（需插件支持） -
import fontUrl from './fonts/inter.woff2';→ 用于动态加载字体或设置@font-face
实际使用示例：
const img = document.createElement('img');
img.src = logo; // ✅ 已是有效 URL
document.body.appendChild(img);
在 React / Vue 等框架中怎么用
框架本身不改变导入机制，但封装得更自然：
- React 中：
import avatar from './avatar.jpg'; <img src="%7Bavatar%7D"> - Vue 单文件组件中：
<style src="./component.css"></style>或import './component.css'在<script></script>块中 - Vite 用户：开箱支持
import图片/CSS，无需额外配置；CSS Modules 默认启用xxx.module.css
不使用构建工具？替代方案
若直接在浏览器中运行（如通过 type="module" 引入 JS），无法 import 样式或图片。可改用：
- 手动创建
<link rel="stylesheet">或<img src="..."> - 用
fetch()+new CSSStyleSheet()动态加载 CSS（现代浏览器支持） - 用
URL.createObjectURL(new Blob([...]))处理本地二进制资源（较少见）
本质上，import 静态资源不是 JavaScript 的能力，而是工程化生态提供的便利语法糖。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
