Taro+Nutui-taro 自定义主题配置不生效的解决方案

配置定制化主题官方提供的具体方法如下：
推荐方法https://nutui.jd.com/#/theme

但是按照官网的配置还是不生效，使用taro版本是3.3.17，@nutui/nutui-taro版本是3.1.8
配置

// vue/cli 3 以上版本修改 vue.config.js 的配置
module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            scss: {
                // @/ 是 src/ 的别名
                // 注意：在 sass-loader v7 中，这个选项名是 "data"
                prependData: `@import "@/assets/custom_theme.scss";`,
            }
        },
    }
}

结果不生效！！！

经过各种查找，看看nutui git仓库上有没有人遇到这个问题，果然有人提了一个issue，nice 对应issue

按照issue的描述，最终得以解决。

配置步骤如下：

一、 在静态文件目录中新建自定义变量 scss文件 theme.scss
具体主题变量配置可以参照 官方配置
例如：

$primary-color: #535fed;
$primary-color-end: #535fed;

二、修改config/index.js 文件中添加以下内容

const path = require('path');

const config = {
    sass: {
        resource: [
            path.resolve(__dirname, '..', 'src/styles/theme.scss') // 预加载自定义的主题scss
        ]
    }
};

三、 修改app.ts 文件中的Nutui的样式引入
更改为

// import '@nutui/nutui-taro/dist/style.css'; 更改为以下方式引入
import '@nutui/nutui-taro/dist/styles/themes/default.scss';

然后重新运行即可。