[Bug]: Unable to recognize the less variable in the third-party library (like component library)

[Sunny-117]

System Info

macOS
node:v16.14.2
pnpm: 6.32.3

Details

webpack can operate normally：

rspack：

I can directly use the less variable in the project. The less variable used inside the third-party component library will report an error.

Reproduce link

https://github.com/op-sources/rspack-bug-playground

Reproduce Steps

There is no need to install node_modules, because the reproduce link is already included.

Run project:
start webpack server: cd packages/active: pnpm dev
start rspack server: cd packages/home: pnpm dev

[LingyuCoder]

Fail to build because node_modules of packages/* are lost.

[Sunny-117]

Fail to build because node_modules of packages/* are lost.

It has been updated. Please take a look

node_modules download address and project start method: https://jzq422bol5.feishu.cn/wiki/Pe7pwcmdaitTBNk18vKcXuQjnth?from=from_copylink

[xc2]

this file is a css file other than a less file and the highlighted variable is a css variable as well.

min(1 * var(--dls-transition-from-y, 0), 0) is not valid in less by default.

please separate rules for less and css. e.g.,

[
    {
        test: /\.css$/,
        use: [
            {
              loader: 'style-resources-loader',
              options: {
                 // ...
              }
          }
        ],
        type: 'css'
    },
    {
        test: /\.less$/,
        use: [
            'less-loader',
            {
              loader: 'style-resources-loader',
              options: {
                 // ...
              }
          }
        ],
        type: 'css'
    },
]

or setting the math option of less.js to parens

    {
        test: lessRule,
        use: [
            {
                loader: 'less-loader',options: {lessOptions: {math: 'parens'}}
            },
            {
              loader: 'style-resources-loader',
              options: {
                 // ...
              }
          }
        ],
        type: 'css'
    },

[Sunny-117]

this file is a css file other than a less file and the highlighted variable is a css variable as well.

min(1 * var(--dls-transition-from-y, 0), 0) is not valid in less by default.

please separate rules for less and css. e.g.,

[
    {
        test: /\.css$/,
        use: [
            {
              loader: 'style-resources-loader',
              options: {
                 // ...
              }
          }
        ],
        type: 'css'
    },
    {
        test: /\.less$/,
        use: [
            'less-loader',
            {
              loader: 'style-resources-loader',
              options: {
                 // ...
              }
          }
        ],
        type: 'css'
    },
]

or setting the math option of less.js to parens

    {
        test: lessRule,
        use: [
            {
                loader: 'less-loader',options: {lessOptions: {math: 'parens'}}
            },
            {
              loader: 'style-resources-loader',
              options: {
                 // ...
              }
          }
        ],
        type: 'css'
    },

Thanks a lot