CSS 模块被捆绑，但未使用使用 Rollup underhood 的 TSDX 进行引用

Question

我已经使用 TSDX 创建了一个 React 库 → https://github.com/deadcoder0904/react-typical

它使用 CSS 模块并将样式附加到 React 库。

该包正确地将 CSS 文件输出到 dist/ 文件夹中，但它从未真正按应有的方式引用它。

这导致我的样式根本不显示。

这是我的完整 tsdx.config.js:

const postcss = require('rollup-plugin-postcss');
const { terser } = require('rollup-plugin-terser');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        modules: true,
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ],
        inject: false,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
        minimize: true,
      }),
      terser()
    );
    return config;
  },
};

如果您在 https://yarnpkg.com/package/@deadcoder0904/react-typical?files 看到 dist/ 文件夹，您会注意到它有 index.js 文件，但它根本没有引用 .css 文件.

dist/ 文件夹中的每个 .js 文件也是如此。没有文件引用 .css 文件并且 CSS 代码根本没有捆绑，所以它只是不使用样式。

我该如何解决这个问题？

Answer 1

据我了解，通常库通常会单独介绍组件和样式，并在文档中让用户知道他们是否要使用默认样式，然后让导入 css 文件，例如：

import ReactTypical from "react-typical"
import "react-typical/dist/react-typical.cjs.development.css"

我猜这和你的情况一样

或者您可以默认设置您的样式而不要求他们手动导入，这意味着您必须通过设置 inject: true 来优化您的配置，它会将您的 css 上下文导入到您的 [=13] =] 文件然后在运行时执行以将脚本附加到文档的 <head /> 中。那么您的更改配置将如下所示：

postcss({
  modules: true,
  plugins: [
    autoprefixer(),
    cssnano({
      preset: 'default',
    }),
  ],
  // Append to <head /> as code running
  inject: true,
  // Keep it as false since we don't extract to css file anymore
  extract: false,
})

Answer 2

为了使用故事书，请将以下 css 规则添加到您的 webpack 故事书配置中 ./story/main.js：

// Remove the existing css rule
config.module.rules = config.module.rules.filter(
  f => f.test.toString() !== '/\.css$/'
);

config.module.rules.push(
  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader',
    ],
    include: path.resolve(__dirname, "../src"),
  }
)

但是你在你的包依赖中错过了它们，记得添加它们：

npm i -D style-loader css-loader

CSS 模块被捆绑，但未使用使用 Rollup underhood 的 TSDX 进行引用

CSS Module gets bundled but is not referenced using TSDX which uses Rollup underhood

javascript

css

reactjs

typescript

rollupjs