jd-opensource / jd-opensource/taro-ui

引入样式库后编译为微信小程序失败:Can't resolve './style/themes/red.scss'

Open
#1,281 5 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.