🐛没有使用 less-loader 的项目中编译失败

[linwrui]

🏷 S2 Version / S2 版本

Package	Version
@antv/s2	2.1.10
@antv/s2-react	-
@antv/s2-react-components	-

💻 Sheet Type / 表格类型

• PivotSheet
• TableSheet
• PivotChartSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Describe the bug / 问题描述

报错信息如下：

ERROR in ./node_modules/@antv/s2-next/esm/ui/tooltip/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import '../../styles/variables.less';
| @import '../../styles/theme/dark.less';
|
 @ ./node_modules/@antv/s2-next/esm/ui/tooltip/index.js 4:0-22
 @ ./node_modules/@antv/s2-next/esm/index.js
 @ ./node_modules/@storybook/vue/node_modules/ts-loader??ref--3-0!./node_modules/ts-loader??ref--14!./node_modules/vue-loader/lib??vue-loader-options!./packages/S2-table-renderer/components/s2-table-instance.vue?vue&type=script&lang=ts&
 @ ./packages/S2-table-renderer/components/s2-table-instance.vue?vue&type=script&lang=ts&
...

溯源文件是 tooltip/index.js 文件引入了 less 样式文件导致的，但是我的项目使用 scss ，没有引入 less-loader ，是否有其他办法能避免引入新的 loader 并且能正常编译

⌨️ Code Snapshots / 代码片段

ERROR in ./node_modules/@antv/s2-next/esm/ui/tooltip/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import '../../styles/variables.less';
| @import '../../styles/theme/dark.less';
|
 @ ./node_modules/@antv/s2-next/esm/ui/tooltip/index.js 4:0-22
 @ ./node_modules/@antv/s2-next/esm/index.js
 @ ./node_modules/@storybook/vue/node_modules/ts-loader??ref--3-0!./node_modules/ts-loader??ref--14!./node_modules/vue-loader/lib??vue-loader-options!./packages/S2-table-renderer/components/s2-table-instance.vue?vue&type=script&lang=ts&
 @ ./packages/S2-table-renderer/components/s2-table-instance.vue?vue&type=script&lang=ts&
...

🔗 Reproduction link / 复现链接

No response

📋 Steps to Reproduce the Bug or Issue / 重现步骤

在没有使用 less-loader 的项目中引入 s2 v2.x ，编译项目即可复现

😊 Expected Behavior / 期望行为

正常编译

😅 Current Behavior / 当前行为

No response

💻 OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

🌏 Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[petercat-assistant]

您在没有使用 less-loader 的项目中遇到了编译失败的问题，这是因为 @antv/s2-next 包中引入了 .less 文件，而您的项目使用的是 scss，并没有配置处理 .less 文件的 loader。

要解决这个问题，您有以下几种选择：

1. 引入 less-loader：这是最直接的方法。您可以在项目中安装 less 和 less-loader，然后在 Webpack 配置中添加相应的 loader 配置。这将允许 Webpack 正确处理 .less 文件。

   npm install less less-loader --save-dev

   然后在 Webpack 配置中添加：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.less$/,
           use: [
             'style-loader',
             'css-loader',
             'less-loader'
           ],
         },
       ],
     },
   };

2. 使用 CSS 预编译版本：如果 @antv/s2-next 提供了预编译的 CSS 文件，您可以直接引入这些文件，而不需要处理 .less 文件。这需要查看 @antv/s2-next 的文档或源码，确认是否有这样的选项。

3. 自定义构建：如果您不希望引入新的 loader，可以考虑从 @antv/s2-next 的源码中提取需要的样式文件，并将其转换为 scss 或直接编译为 CSS。

目前，最简单的解决方案是引入 less-loader，这将确保所有依赖的 .less 文件都能被正确处理。

如果您有其他问题或需要进一步的帮助，请随时告诉我。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[github-actions]

你好 @linwrui:

提 Issue 须知

⚠️ 在提出问题前，请确保你已经仔细阅读👓/搜索🔍过 官方文档 和 常见问题 以及 图表示例, 并且已经搜索查阅过相关 Issues 列表 和 Discussions 列表. 当你确定自己的问题没有解决方案时，请提交 issue。 ⚠️

如果是使用问题，不知道怎么用，移步 Discussions 讨论区 并提供 有效信息 进行 提问。

参与社区共建

这是一个开源项目, 我们也有繁忙的业务要做, 是用自己的业余时间在维护, 为爱发电, 精力有限, 所以有时候 issue 响应速度不是那么及时, 如果你遇到了问题, 或者对 Issues 和 Discussions 列表的问题感兴趣, 可以直接认领并尝试修复 (贡献指南)，帮助 S2 变得更好, 而不是一味的埋怨和催促, 我们不是甲方乙方的关系.