jdf2e
无法切换官方主题
NutUI 包名
@nutui/nutui-taro
NutUI 版本号
4.3.13
平台
weapp
重现链接
https://github.com/axiangcoding/taro-demo
重现步骤
- 执行yarn install
- 运行 yarn dev:weapp
- 报错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
补充：
相比于默认的模板，为了切换官方主题做了调整，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" })] })) }
补充：
相比于默认的模板，为了切换官方主题做了调整，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" })] })) }
不行啊，还是报错
补充： 相比于默认的模板，为了切换官方主题做了调整，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" })] })) }不行啊，还是报错
我的意思是这样写依然报错，虽然参考了官网的做法
补充：
相比于默认的模板，为了切换官方主题做了调整，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
这个警告表明你的项目中使用了 Sass 的 @import 语法，但该语法 已在 Dart Sass 1.80.0 版本中被弃用，并将在 Dart Sass 3.0.0 版本中被移除。就是你的sass版本太高了，支持用@use不支持@import 是这个原因导致的吧。 你用自定义全局配置修改就行了 。 等官方修完这个报错估计就能用了那个主题
这样就行了
