Using 'craco' with 'less' and 'postcss'

Question

I use craco to customize configuration. I want to use less module and postcss and some postcss plugins，but I have encountered many problems

craco.config.js

style: {
    postcss: {
      plugins: [
        require('postcss-px-to-viewport')({
         // some config
        }),
      ],
    },

It does not seem to take effect.

Then I try using it in a different way

 // craco.config.js craco's plugin
 plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        // It doesn't work here either
        // css modules 
        cssLoaderOptions: {
          modules: { localIdentName: '[local]_[hash:base64:6]' },
        },

        
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true,
          },
        },
        modifyLessRule: function () {
          return {
            test: /\.module\.less$/,
            exclude: /node_modules/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    localIdentName: '[local]_[hash:base64:6]',
                  },
                },
              },
              { loader: 'less-loader' },
            ],
          };
        },
        postcssLoaderOptions: {
          ident: 'postcss',
          plugins: [
            require('postcss-px-to-viewport')({
             // some config 
            }),
          ],
        },
      },
    },
  ],

It still doesn't work. What should I do next?

Answer 1

when overriding modifyLessRule function, the normal process won't take place. so if you need postcssloader for the less modules file, your modifyLessRule should look like this:

modifyLessRule: function () {
      return {
        test: /\.module\.less$/,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]_[hash:base64:6]',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [
                  require('postcss-px-to-viewport')({
                  // some config 
                  }),
                ],
              },
            },
          },
          { loader: 'less-loader' },
        ],
      };
    },