reactjs - 将 'craco' 与 'less' 和 'postcss' 一起使用

Question

我用craco来自定义配置。我想用lessmodule和postcss一些postcss插件，但是遇到了很多问题

craco.config.js

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

它似乎没有生效。

然后我尝试以不同的方式使用它

 // 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 
            }),
          ],
        },
      },
    },
  ],

它仍然不起作用。接下来我该怎么办？

Answer 1

当覆盖 modifyLessRule 函数时，不会发生正常的过程。因此，如果您需要 postcssloader 用于较少的模块文件，您的 modifyLessRule 应该如下所示：

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' },
        ],
      };
    },