如何处理抖音小程序Mona框架中less-loader的模块构建失败问题？

Question

抖音小程序Mona框架想要模块化引入less只能将less文件命名为xxx.module.less，但是我想让它可以直接使用xxx.less，所以就在mona.config.ts配置chain来修改 webpack配置，下面是我写的代码：
chain: (config) => {

config.module
  .rule('less')  
  .test(/\.less$/)  
  .use('style-loader')  
    .loader('style-loader')  
    .end()  
  .use('css-loader')  
    .loader('css-loader')  
    .options({
      importLoaders: 1,
      sourceMap: true, // 开启 CSS Modules  
    })  
    .end()
  .use('less-loader')  
    .loader('less-loader')
    .options({
      lessOptions: {
        javascriptEnabled: true,
      },
    })
    .end()

},
然后项目就报错了：
Module build failed (from ./node_modules/less-loader/dist/cjs.js):

// Imports
import CSS_LOADER_API_SOURCEMAP_IMPORT from "../../../node_modules/css-loader/dist/runtime/sourceMaps.js";

在网上搜索报错信息找了很多方法都没有解决，有大佬救救吗？

Answer 1

在抖音小程序Mona框架中，修改webpack配置以支持.less文件作为CSS Modules使用时，通常你不需要手动在文件名后添加.module后缀，因为CSS Modules是通过webpack的配置选项来启用的，而不是通过文件名约定。

然而，从你提供的配置和错误信息来看，有几个潜在的问题需要解决：

1. sourceMap配置位置：在css-loader选项中，sourceMap只是启用CSS源映射，它本身并不开启CSS Modules。CSS Modules是通过在loader配置中添加特定的查询参数（如modules: true）来启用的。
2. modules配置：要启用CSS Modules，你需要在css-loader的options中添加modules: true。
3. style-loader与小程序：通常在小程序环境中，你不会使用style-loader，因为它主要用于将CSS注入到DOM中的<style>标签中，而小程序有其自己的样式系统。

基于以上分析，这里有一个修改后的webpack配置示例，它应该适用于抖音小程序Mona框架并启用CSS Modules：

chain: (config) => {
  config.module
    .rule('less')
    .test(/\.less$/)
    .use('css-loader')
      .loader('css-loader')
      .options({
        modules: true, // 启用CSS Modules
        importLoaders: 2, // 因为后面有less-loader，所以这里设置为2
        sourceMap: true, // 如果你需要源映射
      })
      .end()
    .use('less-loader')
      .loader('less-loader')
      .options({
        lessOptions: {
          javascriptEnabled: true,
        },
      })
      .end();

  // 注意：这里没有使用style-loader，因为小程序不需要它
  // ... 其他配置
},

注意，我已经移除了style-loader并更新了importLoaders的值为2，因为现在有css-loader和less-loader两个loader会处理CSS。

此外，请确保你的项目依赖中包含了css-loader和less-loader，并且它们的版本与你的项目兼容。

如果修改后仍然遇到问题，请检查以下几点：

• 确保没有其他webpack规则与.less文件冲突。
• 清除旧的构建缓存并重新构建项目。
• 查看webpack的完整错误堆栈以获取更多关于失败原因的线索。
• 查阅Mona框架的官方文档或社区论坛，看看是否有其他开发者遇到过类似的问题。