时间戳

首页 > 解决方案 > CSS 模块被捆绑，但没有使用使用 Rollup underhood 的 TSDX 引用

javascript - CSS 模块被捆绑，但没有使用使用 Rollup underhood 的 TSDX 引用

问题描述

我使用 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?filesdist/看到该文件夹​​，那么您会注意到它有文件，但根本没有引用该文件。index.js.css

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

我该如何解决这个问题？

标签： javascriptcssreactjstypescriptrollupjs

解决方案

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

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

我猜这和你的情况一样

或者您将默认设置您的样式而不要求他们手动导入，这意味着您必须通过设置来优化您的配置inject: true，它会将您的 css 上下文导入您的js文件，然后在运行时执行以将脚本附加到<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,
})

推荐阅读