search

NervJS / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库
https://taro-ui.taro.zone
MIT License
4.52k stars 756 forks source link

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

Open MalavitaC opened 3 years ago

MalavitaC commented 3 years ago

Taro UI 版本信息

v2.3.4

问题描述

按照官方示例，全局引入组件样式后，编译失败

复现步骤

1、在 app.scss 中全局引入样式库 2、在 pages/index/index.vue 中使用 AtButton 组件 3、编译为微信小程序

复现代码

// app.scss
@import "~taro-ui/dist/style/index.scss";
// index.vue
<template>
  <view class="index">
    <text>{{ msg }}</text>
         <AtButton type='primary'>按钮文案</AtButton>
  </view>
</template>

<script>
import { ref } from 'vue'
import { AtButton } from 'taro-ui'
import './index.scss'

export default {
  components: {
    AtButton
  },
  setup () {
    const msg = ref('Hello world')
    return {
      msg
    }
  }
}
</script>
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

maxmeng93 commented 3 years ago

+1

生成  工具配置  C:\klzz-project\demo\taroApp\dist/project.config.json

编译  发现入口  src/app.js
编译  发现页面  src/pages/login/login.jsx
编译  发现页面  src/pages/index/index.jsx
�   编译失败.

./node_modules/taro-ui/dist/weapp/index.ts
Module not found: Can't resolve './style/index.scss' in 'C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp'

监听文件修改中...

./node_modules/taro-ui/dist/weapp/index.ts
Module not found: Error: Can't resolve './style/index.scss' in 'C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp'
resolve './style/index.scss' in 'C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp'
  using description file: C:\klzz-project\demo\taroApp\node_modules\taro-ui\package.json (relative path: ./dist/weapp)
    using description file: C:\klzz-project\demo\taroApp\node_modules\taro-ui\package.json (relative path: ./dist/weapp/style/index.scss)
      no extension
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss doesn't exist
      .js
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.js doesn't exist
      .jsx
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.jsx doesn't exist
      .ts
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.ts doesn't exist
      .tsx
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.tsx doesn't exist
      .mjs
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.mjs doesn't exist
      .vue
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.vue doesn't exist
      as directory
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss doesn't exist
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.js]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.jsx]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.ts]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.tsx]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.mjs]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\index.scss.vue]
 @ ./node_modules/taro-ui/dist/weapp/index.ts 2:0-28
 @ ./node_modules/taro-ui/dist/index.js
 @ ./node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib!./src/pages/login/login.jsx
 @ ./src/pages/login/login.jsx,./node_modules/taro-ui/dist/weapp/index.ts
Module not found: Error: Can't resolve './style/themes/purple.scss' in 'C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp'
resolve './style/themes/purple.scss' in 'C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp'
  using description file: C:\klzz-project\demo\taroApp\node_modules\taro-ui\package.json (relative path: ./dist/weapp)
    using description file: C:\klzz-project\demo\taroApp\node_modules\taro-ui\package.json (relative path: ./dist/weapp/style/themes/purple.scss)
      no extension
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss doesn't exist
      .js
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.js doesn't exist
      .jsx
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.jsx doesn't exist
      .ts
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.ts doesn't exist
      .tsx
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.tsx doesn't exist
      .mjs
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.mjs doesn't exist
      .vue
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.vue doesn't exist
      as directory
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss doesn't exist
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.js]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.jsx]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.ts]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.tsx]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.mjs]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\purple.scss.vue]
 @ ./node_modules/taro-ui/dist/weapp/index.ts 4:0-36
 @ ./node_modules/taro-ui/dist/index.js
 @ ./node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib!./src/pages/login/login.jsx
 @ ./src/pages/login/login.jsx,./node_modules/taro-ui/dist/weapp/index.ts
Module not found: Error: Can't resolve './style/themes/red.scss' in 'C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp'
resolve './style/themes/red.scss' in 'C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp'
  using description file: C:\klzz-project\demo\taroApp\node_modules\taro-ui\package.json (relative path: ./dist/weapp)
    using description file: C:\klzz-project\demo\taroApp\node_modules\taro-ui\package.json (relative path: ./dist/weapp/style/themes/red.scss)
      no extension
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss doesn't exist
      .js
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.js doesn't exist
      .jsx
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.jsx doesn't exist
      .ts
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.ts doesn't exist
      .tsx
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.tsx doesn't exist
      .mjs
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.mjs doesn't exist
      .vue
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.vue doesn't exist
      as directory
        C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss doesn't exist
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.js]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.jsx]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.ts]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.tsx]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.mjs]
[C:\klzz-project\demo\taroApp\node_modules\taro-ui\dist\weapp\style\themes\red.scss.vue]
 @ ./node_modules/taro-ui/dist/weapp/index.ts 3:0-33
 @ ./node_modules/taro-ui/dist/index.js
 @ ./node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib!./src/pages/login/login.jsx
 @ ./src/pages/login/login.jsx

(node:11820) UnhandledPromiseRejectionWarning: [object Array]
(node:11820) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:11820) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
bbisky commented 3 years ago

3.0的taro要装 taro-ui 3.0版本 cnpm install taro-ui@3.0.0-alpha.9 --save-dev

powerfooI commented 3 years ago

@bbisky 谢谢，问题已经解决。 希望 Taro 或者 Taro-ui 官网上可以说明一下这一点。

ChenAlmost commented 2 years ago

3.0的taro要装 taro-ui 3.0版本 cnpm install taro-ui@3.0.0-alpha.9 --save-dev

save my life

BongBongBang commented 2 years ago

@bbisky 谢谢，问题已经解决。 希望 Taro 或者 Taro-ui 官网上可以说明一下这一点。

我也是来提issue才解决了这个问题。。。。