亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

CSS 模塊被捆綁但未使用使用 Rollup underhood 的 TSDX 進行引用

CSS 模塊被捆綁但未使用使用 Rollup underhood 的 TSDX 進行引用

繁星coding 2022-12-22 15:31:36
我已經使用 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 代碼根本沒有捆綁,所以它只是不使用樣式。我該如何解決這個問題?
查看完整描述

2 回答

?
達令說

TA貢獻1821條經驗 獲得超6個贊

據我了解,通常一個庫通常會單獨介紹組件和樣式,并在文檔中讓用戶知道他們是否想使用默認樣式,然后也讓導入 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,

})


查看完整回答
反對 回復 2022-12-22
?
HUX布斯

TA貢獻1876條經驗 獲得超6個贊

為了使用故事書,請將以下 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


查看完整回答
反對 回復 2022-12-22
  • 2 回答
  • 0 關注
  • 113 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號