在 TypeScript 的 TSDX 项目中导入 CSS

2023-10-19 15:22:22

TSDX 是一个基于 Rollup 的工具，可以帮助你快速搭建 TypeScript 项目。它集成了许多开箱即用的功能，可以让你轻松地构建、测试和部署你的项目。其中一个功能就是可以让你导入 CSS 文件。

在 TSDX 项目中导入 CSS 文件有两种方法：

使用 rollup-plugin-postcss

rollup-plugin-postcss 是一个 Rollup 插件，可以让你轻松地导入 CSS 文件。它支持 Sass、Less、Stylus 和 PostCSS 等预处理器。

要使用 rollup-plugin-postcss，你需要先安装它：

npm install --save-dev rollup-plugin-postcss

然后，你需要在你的 tsdx.config.js 文件中配置 rollup-plugin-postcss：

const { defineConfig } = require('@tsdx/typescript-react');
const postcss = require('rollup-plugin-postcss');

module.exports = defineConfig({
  plugins: [
    postcss({
      extensions: ['.css'],
    }),
  ],
});

这样，你就可以在你的项目中导入 CSS 文件了：

import './styles.css';

使用 Webpack

如果你不想使用 rollup-plugin-postcss，你也可以使用 Webpack 来导入 CSS 文件。

要使用 Webpack，你需要先安装它：

npm install --save-dev webpack

然后，你需要在你的 package.json 文件中添加以下配置：

{
  "scripts": {
    "start": "webpack serve --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  }
}

最后，你需要创建一个 webpack.config.js 文件，并添加以下配置：

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};