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 代码根本没有捆绑,所以它只是不使用样式。


我该如何解决这个问题?


繁星coding
浏览 79回答 2
2回答

达令说

据我了解,通常一个库通常会单独介绍组件和样式,并在文档中让用户知道他们是否想使用默认样式,然后也让导入 css 文件,例如:import ReactTypical from "react-typical"import "react-typical/dist/react-typical.cjs.development.css"我猜这和你的情况一样或者你会默认设置你的样式而不要求他们手动导入这意味着你必须通过设置来优化你的配置inject: true,它会将你的 css 上下文导入你的js文件然后在运行时执行以将脚本附加到<head />文档中。然后您更改的配置将如下所示:postcss({&nbsp; modules: true,&nbsp; plugins: [&nbsp; &nbsp; autoprefixer(),&nbsp; &nbsp; cssnano({&nbsp; &nbsp; &nbsp; preset: 'default',&nbsp; &nbsp; }),&nbsp; ],&nbsp; // Append to <head /> as code running&nbsp; inject: true,&nbsp; // Keep it as false since we don't extract to css file anymore&nbsp; extract: false,})

HUX布斯

为了使用故事书,请将以下 css 规则添加到您的webpack故事书配置中./story/main.js:// Remove the existing css ruleconfig.module.rules = config.module.rules.filter(&nbsp; f => f.test.toString() !== '/\\.css$/');config.module.rules.push(&nbsp; {&nbsp; &nbsp; test: /\.css$/,&nbsp; &nbsp; use: [&nbsp; &nbsp; &nbsp; 'style-loader',&nbsp; &nbsp; &nbsp; 'css-loader',&nbsp; &nbsp; ],&nbsp; &nbsp; include: path.resolve(__dirname, "../src"),&nbsp; })但是你在你的包依赖中错过了它们,只记得添加它们:npm i -D style-loader css-loader
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript