在 ts 中加载 css 样式和图片

本文介绍了在TypeScript环境中如何配置加载CSS样式和图片。对于CSS,需要下载依赖并配置识别CSS模块;对于图片,同样需要下载依赖,然后在tsconfig.json中配置图片加载项,并创建相应的模块解析文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在 ts 环境中加载 css 样式和图片都需要简单的配置,配置流程如下:

加载 css 样式

  • 首先需要下载额外的依赖:
npm i --save-dev css-loader style-loader
  • 下载完依赖之后,需要到 webpack.config.js 文件中配置识别 css module 的配置项:
module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      { test: /\.tsx?$/, loader: "ts-loader" },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

      // Load .css files
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
    ]
  },

这样就可以在文件加载 css 样式了,简单实用:)

import "styles.css"; // 不要忘记了 .css 的后缀 

ts 中加载图片

  • 第一步还是下载依赖:
npm i --save-dev file-loader
  • 下载完依赖之后,接着还是到 webpack.config.js 文件中配置加载图片的配置项:
    接着上面 css 的配置项后面接着写就ok了
module: {
     rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      { test: /\.tsx?$/, loader: "ts-loader" },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

      // Load .css files
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      
      //Load image
      { test: /\.(jpg|jpeg|png|svg)$/, loader: 'file-loader', options: { name: 'images/[hash].[ext]' } },
    ]
  },
  • 最重要的是需要引入 images.d.ts 文件,并且将该文件放在 tsconfig.json 同级路径下images.d.ts 内容:
declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";
declare module "*.tiff";

这样就可以识别所有不同后缀名的文件了

  • 引入图片
import img from "../public/images/homephoto.png";
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值