组件中import './xxx/pcss'不生效，dumirc配置如下

[ThorSmallice]

组件中import './xxx/pcss'不生效，dumirc配置如下

[PeachScript]

postcssLoader 配置项是用来传递配置给内置规则的 postcss-loader 的，自定义 loader 需要使用 chainWebpack 配置项：https://d.umijs.org/plugin/api#chainwebpack

[ThorSmallice]

我尝试了两种做法均不生效

// 1
import { defineConfig } from 'dumi';
import { resolve } from 'path';
export default defineConfig({
  outputPath: 'docs-dist',
  chainWebpack: (config: any) => {
    config.module
      .rule('pcss')
      .test(/\.pcss$/)
      .use('style-loader')
      .loader('style-loader')
      .end()
      .use('css-loader')
      .loader('css-loader')
      .end()
      .use('postcss-loader')
      .loader('postcss-loader')
      .options({
        ident: 'postcss',
        plugins: () => [require('autoprefixer')],
      })
      .end()
      .use('pcss-loader')
      .loader('pcss-loader')
      .end();

    return config;
  },
  resolve: {
    atomDirs: [
      {
        type: 'component',
        dir: 'src/components',
      },
      {
        type: 'hooks',
        dir: 'src/hooks',
      },
    ],
  },
  // plugins: ['./plugins/postcss.ts'],
  themeConfig: {
    name: 'maptalks-react',
  },
  alias: {
    '@context': resolve(__dirname, 'src/context'),
    '@hooks': resolve(__dirname, 'src/hooks'),
  },
});

2-----

import { defineConfig } from 'dumi';
import { resolve } from 'path';
export default defineConfig({
  outputPath: 'docs-dist',
  resolve: {
    atomDirs: [
      {
        type: 'component',
        dir: 'src/components',
      },
      {
        type: 'hooks',
        dir: 'src/hooks',
      },
    ],
  },
  plugins: ['./plugins/postcss.ts'],
  themeConfig: {
    name: 'maptalks-react',
  },
  alias: {
    '@context': resolve(__dirname, 'src/context'),
    '@hooks': resolve(__dirname, 'src/hooks'),
  },
});

plugins/postcss.ts

import { IApi } from 'dumi';
export default (api: IApi) => {
  api.describe({
    key: 'postcss',
  });
  api.chainWebpack((config: any) => {
    config.module
      .rule('pcss')
      .test(/\.pcss$/)
      .use('style-loader')
      .loader('style-loader')
      .end()
      .use('css-loader')
      .loader('css-loader')
      .end()
      .use('postcss-loader')
      .loader('postcss-loader')
      .options({
        ident: 'postcss',
        plugins: () => [require('autoprefixer')],
      })
      .end()
      .use('pcss-loader')
      .loader('pcss-loader')
      .end();
 
    return config;
  });
};

[PeachScript]

提供下最小可复现仓库

[ThorSmallice]

https://github.com/ThorSmallice/dumi-test.git

pcss使用在Foo组件中

[PeachScript]

没用过 pcss-loader，但从文档来看它返回的是 js module，需要自己把 styles 插入到 DOM 里，示例项目没有做这个步骤所以样式不会生效，ref: https://github.com/fabien-h/pcss-loader#input-and-output

[ThorSmallice]

pcss-loader可以注释掉的，我在其他的webpack项目里只需要这样配置postcss-loader，如下

module: {
 rules: [
 {
        test: /\.(p?css)$/,
        include: [/apps[\/\\]react-.*/, /node_modules[\/\\]@scet/],
        exclude: /\.scoped\.(pcss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
          },
          'postcss-loader'
        ]
      }
]
}

然后在根目录创建postcss.config.js / postcss.config.cjs 就可以import pcss文件使用了