在 ts 中加载 css 样式和图片

最新推荐文章于 2024-03-22 15:05:19 发布

金融女魔头

最新推荐文章于 2024-03-22 15:05:19 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_45548211/article/details/99961079

本文介绍了在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";