【TSDX】在TSDX中引用css样式文件

TSDX中引用及打包CSS样式文件指南

最新推荐文章于 2025-10-15 08:11:51 发布

原创

最新推荐文章于 2025-10-15 08:11:51 发布 · 4.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #typescript #reactjs #前端

本文介绍了如何在TSDX项目中引入和打包CSS样式文件。通过新建`custom-rollup.config.js`并安装相应插件，可以解决TSDX默认不支持CSS的问题。打包后，用户可以选择在使用npm包时手动引入CSS，或者通过修改配置实现自动注入全局样式。

如何在TSDX中引用css样式文件？

TSDX默认不支持引入css，遇到 import xxx.css 会提示：

✖ Failed to compile
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

解决方法

在项目根目录，新建tsdx.config.js：

const postcss = require('rollup-plugin-postcss');

module.exports = {
   
   
  rollup(config, options) {
   
   
    config.plugins.push(
      postcss({
   
   
        inject: false,
        extract: !!options.writeMeta,
      }),
    );
    return config;
  },
}