Taro + vite中使用less module以及less变量

less module配置

在config文件中，下面的配置，直接可以开启module模式

mini: {
  postcss: {
    pxtransform: {
      enable: true,
      config: {},
    },
    cssModules: {
      enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
      config: {
        namingPattern: "module", // 转换模式，取值为 global/module
        generateScopedName: "[name]__[local]___[hash:base64:5]",
      },
    },
  },
    },

less变量的相关配置

在 Vite 和 Taro 项目中，如果你遇到 variable @bg01 is undefined 这样的错误，通常是由于全局变量没有正确引入到每个 Less 文件中。为了确保全局变量在所有 Less 文件中都可用，你需要正确配置 Vite 和 Taro 的构建工具。

以下是如何在 Taro 项目中使用 Vite 并正确配置全局 Less 变量的步骤：

1. 安装必要的依赖：
   确保你已经安装了 vite、less 和 less-loader 依赖。如果没有安装，可以运行以下命令进行安装：

   npm install vite less less-loader --save-dev
   # 或者
   yarn add vite less less-loader --dev
   

2. 配置 Vite：
   在项目根目录下创建（或编辑） vite.config.js 文件，配置 Less 预处理器的选项：

   import { defineConfig } from 'vite';
   import path from 'path';
   
   export default defineConfig({
     css: {
       preprocessorOptions: {
         less: {
           javascriptEnabled: true,
           additionalData: `@import "${path.resolve(__dirname, 'src/styles/variable.less')}";`
         }
       }
     }
   });
   

3. 确保全局样式文件存在：
   确保你的 variable.less 文件存在于 src/styles 目录下，并且在文件中定义了你需要的变量。例如：

   src/styles/variable.less：

   @primary-color: #1AAD19;
   @font-size-base: 14px;
   @bg01: #f0f0f0;
   

4. 在组件中使用Less文件：
   确保你在你的 Taro 组件中正确引用了 Less 文件，并且全局变量可用。例如，在 src/pages/index/index.less 文件中：

   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: @bg01;
   }
   
   .text {
     color: @primary-color;
     font-size: @font-size-base;
   }
   

   然后在 src/pages/index/index.jsx 文件中：

   import React from 'react';
   import { View } from '@tarojs/components';
   import './index.less';
   
   const Index = () => {
     return (
       <View className='container'>
         <View className='text'>Hello, world!</View>
       </View>
     );
   };
   
   export default Index;
   

5. 运行项目：
   确保所有文件保存无误后，运行 Taro 项目。你可以使用以下命令启动开发服务器：

   npm run dev:weapp
   # 或者
   yarn dev:weapp
   

通过以上步骤，你应该能够成功配置 Vite 和 Less，使得全局变量在所有 Less 文件中都可用，并解决 variable @bg01 is undefined 这样的错误。

如果你仍然遇到问题，请确保以下几点：

• vite.config.js 中的路径配置正确。
• variable.less 文件存在并且定义了所有需要的变量。
• 重新启动开发服务器以确保配置更改生效。