jd-opensource / jd-opensource/taro-ui
引入样式库后编译为微信小程序失败:Can't resolve './style/themes/red.scss'
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
### Taro UI 版本信息
v2.3.4
### 问题描述
按照官方示例,全局引入组件样式后,编译失败
### 复现步骤
1、在 app.scss 中全局引入样式库
2、在 pages/index/index.vue 中使用 AtButton 组件
3、编译为微信小程序
### 复现代码
``` js
// app.scss
@import "~taro-ui/dist/style/index.scss";
```
``` js
// index.vue
{{ msg }}
按钮文案
import { ref } from 'vue'
import { AtButton } from 'taro-ui'
import './index.scss'
export default {
components: {
AtButton
},
setup () {
const msg = ref('Hello world')
return {
msg
}
}
}
```
``` shell
npm run dev:weapp
```
### 报错信息
Module not found: Error: Can't resolve './style/themes/red.scss' in '/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp'
resolve './style/themes/red.scss' in '/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp'
using description file: /Users/caim014/Documents/taro/node_modules/taro-ui/package.json (relative path: ./dist/weapp)
using description file: /Users/caim014/Documents/taro/node_modules/taro-ui/package.json (relative path: ./dist/weapp/style/themes/red.scss)
no extension
/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp/style/themes/red.scss doesn't exist
.js
/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp/style/themes/red.scss.js doesn't exist
.jsx
/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp/style/themes/red.scss.jsx doesn't exist
.ts
/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp/style/themes/red.scss.ts doesn't exist
.tsx
/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp/style/themes/red.scss.tsx doesn't exist
.mjs
/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp/style/themes/red.scss.mjs doesn't exist
.vue
/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp/style/themes/red.scss.vue doesn't exist
as directory
/Users/caim014/Documents/taro/node_modules/taro-ui/dist/weapp/style/themes/red.scss doesn't exist
### 系统信息
👽 Taro v3.0.23
Taro CLI 3.0.23 environment info:
System:
OS: macOS 10.15.5
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.15.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
npmPackages:
@tarojs/components: 3.0.23 => 3.0.23
@tarojs/mini-runner: 3.0.23 => 3.0.23
@tarojs/runtime: 3.0.23 => 3.0.23
@tarojs/taro: 3.0.23 => 3.0.23
@tarojs/webpack-runner: 3.0.23 => 3.0.23
babel-preset-taro: 3.0.23 => 3.0.23
eslint-config-taro: 3.0.23 => 3.0.23
taro-ui: ^2.3.4 => 2.3.4
npmGlobalPackages:
typescript: 4.0.5
### 补充信息
报错信息中可以看到,查找的文件路径与代码中import路径不一致,正确路径应为:
/node_modules/taro-ui/dist/style/themes/red.scss
Contributor guide
Research direction
Start with the app.scss import and the generated path under node_modules/taro-ui/dist/weapp, then compare it with the reported node_modules/taro-ui/dist/style/themes/red.scss location. Run npm run dev:weapp using the provided reproduction and verify that the WeChat mini-program build resolves the theme stylesheet without the module-not-found error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100