css - 仅使用 Typescript 编译 css 文件

Question

我有一个 monorepo 元素，其中一个元素(主要)依赖于另一个元素(组件)。因此，当我启动整个 monorepo 时，主元素使用 webpack.dev 而组件元素只使用简单的 typescript 编译器。像这样:

(主要): yarn 开始:webpack-dev-server ...

(组件): yarn 开始:tsc -b

当涉及到 TS 代码时，我没有问题，但是当涉及到非 ts 文件(css)时，我得到一个 webpack 模块丢失错误。

我已经将 css-loader 和 style-loader 从我的主元素放入我的 webpack 配置中，但它似乎没有解决问题，看起来 typescript 没有正确编译 css 文件

在我的组件元素中我有一些这样的:

import "./index.css"

export const Button = () => {
...
}

然后我从我的主元素中得到这个错误

Module not found: Error: Can't resolve './index.css' in '{...}/frontend/design-components/build'

我的主元素中的 webpack:

 module: {
    rules: [
      ...,
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],

但我认为主要问题是组件元素处理构建的方式(我只使用 typescript 构建，这个元素中没有 rollup 或 webpack)

Answer 1

刚刚也为我的组件元素创建了一个 webpack