umijs / dumi

📖 Static Site Generator for component library development
https://d.umijs.org
MIT License
3.51k stars 1.17k forks source link

全局样式支持格式,styles是否可以支持import等方式 #1019

Open ChenYCL opened 2 years ago

ChenYCL commented 2 years ago

Question

基于dumi做了公司的组件库,当前主题样式定义在公共包的common.scss 下,每个组件都将引入一次,样式:root会被不断覆盖注册, 看到styles属性,是否可以提供单纯引入的方式,官方目前是绝对路径

引发问题

image image

期望

image
mansion-sun commented 2 years ago

"dumi": "^1.1.0", links只支持引入public下的CSS文件,styles貌似无法引入本地CSS,还是说需要配合webpack配置去支持?

export default defineConfig({
  title: '公共组件库',
  favicon: imgs.favicon,
  logo: imgs.logo,
  outputPath: 'docs-dist',
  mode: 'doc',
  hash: true,
  links: [
    { rel: 'stylesheet', type: 'text/css', href: `../css/dumi.css` },
    { rel: 'stylesheet', type: 'text/css', href: `../css/dumi.less` },
    { rel: 'stylesheet', type: 'text/css', href: `../styles/dumi.css` },
    { rel: 'stylesheet', type: 'text/css', href: `../styles/dumi.less` },
  ],
  styles: [
    `../css/dumi.css`,
    `../styles/dumi.css`,
    // `body .__dumi-default-menu { width: 210px; }`,
    // `body .__dumi-default-layout { padding: 50px 10px 10px 230px; }`,
    // `body .__dumi-default-layout-toc { display: none; }`,
  ],
  // Because of using GitHub Pages
  // base: `/${repo}/`,
  // publicPath: `/${repo}/`,
  base: `/`,
  publicPath: `/`,
  navs: [
    null,
    {
      title: 'GitHub',
      path: 'http://192.168.0.238:8099/chinairi/iri-components-react',
    },
  ],
  theme,
  extraBabelPlugins: [
    [
      'babel-plugin-import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  ],
  mfsu: {
  //   development : {
  //     output : "./.mfsu-dev",
  //   },
  //   production : {
  //     output : "./.mfsu-prod",
  //   }
  },
  // more config: https://d.umijs.org/config
});
ChenYCL commented 2 years ago

公共样式每个组件会重复引入,目前采用方案是 在html 中dev下追加公共styles表,组件排除了,业务侧入口单引一次;