无法切换官方主题

[axiangcoding]

NutUI 包名

@nutui/nutui-taro

NutUI 版本号

4.3.13

平台

weapp

重现链接

https://github.com/axiangcoding/taro-demo

重现步骤

1. 执行yarn install
2. 运行 yarn dev:weapp
3. 报错warning，且主题切换未生效

期望的结果是什么？

正确切换主题，并且不会报错

实际的结果是什么？

无法切换主题，报错为：

✔ Webpack
  Compiled successfully in 670.26ms

⚠️ Warnings: 

ModuleWarning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Warning on line 0, column 8 of file:///E:/Projects/project-ax/mini-program/node_modules/@nutui/nutui-taro/dist/styles/mixins/index.scss:0:8:
Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

0 | @import 'make-animation.scss';


node_modules\@nutui\nutui-taro\dist\styles\mixins\index.scss 1:9  @import
node_modules\@nutui\nutui-taro\dist\styles\variables.scss 987:9   @import
src\app.scss 1:9                                                  root stylesheet

ModuleWarning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Warning on line 0, column 8 of file:///E:/Projects/project-ax/mini-program/src/app.scss:0:8:
Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

...

More info and automated migrator: https://sass-lang.com/d/import

986 | @import './mixins/index';


node_modules\@nutui\nutui-taro\dist\styles\variables.scss 987:9  @import
src\app.scss 1:9                                                 root stylesheet

环境信息

Debugger attached.
👽 Taro v4.0.9

Taro CLI 4.0.9 environment info:
System:
OS: Windows 11 10.0.26100
Binaries:
Node: 22.14.0 - F:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - F:\Program Files\nodejs\yarn.CMD
npm: 9.7.2 - F:\Program Files\nodejs\npm.CMD
npmPackages:
@tarojs/cli: 4.0.9 => 4.0.9
@tarojs/components: 4.0.9 => 4.0.9
@tarojs/helper: 4.0.9 => 4.0.9
@tarojs/plugin-framework-vue3: 4.0.9 => 4.0.9
@tarojs/plugin-html: 4.0.9 => 4.0.9
@tarojs/plugin-platform-alipay: 4.0.9 => 4.0.9
@tarojs/plugin-platform-h5: 4.0.9 => 4.0.9
@tarojs/plugin-platform-jd: 4.0.9 => 4.0.9
@tarojs/plugin-platform-qq: 4.0.9 => 4.0.9
@tarojs/plugin-platform-swan: 4.0.9 => 4.0.9
@tarojs/plugin-platform-tt: 4.0.9 => 4.0.9
@tarojs/plugin-platform-weapp: 4.0.9 => 4.0.9
@tarojs/runtime: 4.0.9 => 4.0.9
@tarojs/shared: 4.0.9 => 4.0.9
@tarojs/taro: 4.0.9 => 4.0.9
@tarojs/taro-loader: 4.0.9 => 4.0.9
@tarojs/webpack5-runner: 4.0.9 => 4.0.9
babel-preset-taro: 4.0.9 => 4.0.9
eslint-config-taro: 4.0.9 => 4.0.9

其他补充信息

No response

[axiangcoding]

补充：

相比于默认的模板，为了切换官方主题做了调整，config/index.ts中：

• sass配置项为

  sass: {
      data: `@import "@nutui/nutui-taro/dist/styles/variables-jdt.scss";`
    },
  

• webpackChain调整为：

  webpackChain(chain) {
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
        chain.plugin('unplugin-vue-components').use(Components({
          resolvers: [NutUIResolver({ taro: true, importStyle: "sass" })]
        }))
      }
  

[taodamiao]

补充：

相比于默认的模板，为了切换官方主题做了调整，config/index.ts中：

• sass配置项为

  sass: {
      data: `@import "@nutui/nutui-taro/dist/styles/variables-jdt.scss";`
    },
  

• webpackChain调整为：

  webpackChain(chain) {
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
        chain.plugin('unplugin-vue-components').use(Components({
          resolvers: [NutUIResolver({ taro: true, importStyle: "sass" })]
        }))
      }
  

不行啊，还是报错

[axiangcoding]

补充：
相比于默认的模板，为了切换官方主题做了调整，config/index.ts中：

• sass配置项为

  sass: {
      data: `@import "@nutui/nutui-taro/dist/styles/variables-jdt.scss";`
    },
  

• webpackChain调整为：

  webpackChain(chain) {
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
        chain.plugin('unplugin-vue-components').use(Components({
          resolvers: [NutUIResolver({ taro: true, importStyle: "sass" })]
        }))
      }
  

不行啊，还是报错

我的意思是这样写依然报错，虽然参考了官网的做法

[Gintoki-C]

我也遇到了目前通过修改css解决的

[mekery]

补充：

相比于默认的模板，为了切换官方主题做了调整，config/index.ts中：

• sass配置项为

  sass: {
      data: `@import "@nutui/nutui-taro/dist/styles/variables-jdt.scss";`
    },
  

• webpackChain调整为：

  webpackChain(chain) {
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
        chain.plugin('unplugin-vue-components').use(Components({
          resolvers: [NutUIResolver({ taro: true, importStyle: "sass" })]
        }))
      }
  

这个方法可以，建议将webpackChain部分更新到官方文档：https://nutui.jd.com/taro/vue/4x/#/zh-CN/guide/official-theme

[Ghh118]

这个警告表明你的项目中使用了 Sass 的 @import 语法，但该语法 已在 Dart Sass 1.80.0 版本中被弃用，并将在 Dart Sass 3.0.0 版本中被移除。就是你的sass版本太高了，支持用@use不支持@import 是这个原因导致的吧。 你用自定义全局配置修改就行了 。 等官方修完这个报错估计就能用了那个主题

这样就行了

[tnnevol]

vite7 依赖更高版本的sass，导致无法使用主题，求修复呀