Fix build error when the theme changes component style

Types of changes

[ ] New feature
[x] Bug fix
[ ] Documentation change
[ ] Coding style change
[ ] Refactoring
[ ] Performance improvement
[ ] Test cases
[ ] Continuous integration
[ ] Typescript definition change
[ ] Breaking change

Background and context

It will cause error when building an Arco theme with custom component style.

Solution

The reason for the problem is that the token.less file is not imported by AppendLoader, so I import 'token.less' in each component style files.

How is the change tested?

Just add a example with a arco theme @arco-design/theme-christmas.

Changelog

Changelog(CN)	Changelog(EN)	Related issues
修复构建带有自定义组件样式的主题会出现报错的问题	Fix build error when the theme changes component style

Checklist:

[x] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
[x] Changes are submitted to the appropriate branch (e.g. features should be submitted to feature branch and others should be submitted to master branch)

Other information

The _addAppendLoader() property is a common util function used by somewhere. I perfer to move it to handleComponentStyle() and only inject tokens for limited files. https://github.com/arco-design/arco-plugins/blob/80eb24a510217fc8c0f33376d1de83471bb4a470/packages/unplugin-react/src/plugins/theme.ts#L35-L50 But when I look back at the existing sourcecode, I recall what make this problem happen: The unplugin turn to inject independent module rules instead of modifing properties of normal modules (it caused really much issues). And so that we deprecated the modifyVars option field: https://github.com/arco-design/arco-plugins/blob/80eb24a510217fc8c0f33376d1de83471bb4a470/packages/unplugin-react/README.md?plain=1#L62 It also mean that we doesn't support inject tokens from custom theme implicitly. https://github.com/arco-design/arco-plugins/blob/80eb24a510217fc8c0f33376d1de83471bb4a470/packages/plugin-webpack-react/src/arco-design-plugin/plugin-for-theme.ts#L33-L75 However the automatic injection is not a required feature for every theme. I think that theme package should import token definitions by themself. This is also what the default theme of arco do. So that we didn't find the bug out before.

But there is a workaround way. I left a util here: https://github.com/arco-design/arco-plugins/blob/80eb24a510217fc8c0f33376d1de83471bb4a470/packages/unplugin-react/src/utils/theme.ts#L33-L41 You can use it just like:

module.exports = {
  module: {
    rules: [
      {
        type: 'css',
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
              modifyVars: {
                ...getThemeVars('@arco-design/theme-christmas'),
              }
            },
          },
        ],
      },
    ],
  },
};

You can try it can give some feedback. Whatmore in my opinion just injecting the token file is a better way. I don't know why the legacy webpack plugin intend to parse the token source file into options of modifyVar. Maybe we need some further disscussion. @yinkaihui cc~

arco-design / arco-plugins