Question

我已经使用TSDX→https://github.com/deadcoder0904/react-typical

创建了一个React库。

它使用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文件。 / p>

.js文件夹中的每个dist/文件都具有相同的内容。没有文件引用.css文件，而且CSS代码完全没有捆绑在一起，因此它根本不使用样式。

我该如何解决？

Answer 1

据我所知，通常一个库通常会分别介绍组件和样式，并让用户在文档中知道他们是否要使用默认样式，然后也可以导入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,
})

Answer 2

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

// 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模块已捆绑在一起，但未使用TSDX进行引用，TSDX使用汇总汇总

2 个答案: