Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

通过import的scss文件间接引入node_modules中的scss文件报错 #2478

Closed
imageslr opened this issue Mar 18, 2019 · 8 comments
Closed

Comments

@imageslr
Copy link

问题描述
/variables.scss文件中引入taro-ui的默认变量包,然后在/app.scss中引入/variables.scss时报错:
message: 'File to import not found or unreadable: ~taro-ui/dist/style/index.scss.'

复现步骤
[复现问题的步骤]

  1. 新建文件/variables.scss,内容仅有一行@import "~taro-ui/dist/style/index.scss";
  2. /app.scss中仅有一行@import "./styles/variables.scss";
  3. /app.jsimport "./app.scss";
  4. 编译文件

期望行为
编译成功

报错信息

{ Error: File to import not found or unreadable: ~taro-ui/dist/style/index.scss.
    at Object.module.exports.renderSync (/Users/xxx/campus-book-market/node_modules/node-sass/lib/index.js:439:16)
    at Promise (/Users/xxx/campus-book-market/node_modules/@tarojs/plugin-sass/index.js:11:21)
    at new Promise (<anonymous>)
    at compileSass (/Users/xxx/campus-book-market/node_modules/@tarojs/plugin-sass/index.js:4:10)
    at Object.callPlugin (/usr/local/lib/node_modules/@tarojs/cli/src/util/npm.js:122:10)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3
  status: 1,
  file: '/Users/xx/campus-book-market/src/variables.scss',
  line: 1,
  column: 1,
  message: 'File to import not found or unreadable: ~taro-ui/dist/style/index.scss.',
  formatted: 'Error: File to import not found or unreadable: ~taro-ui/dist/style/index.scss.\n        on line 1 of src/variables.scss\n        from line 2 of src/app.scss\n>> @import "~taro-ui/dist/style/index.scss";\n\n   ^\n' }
编译  所有页面  
生成  依赖文件  dist/reducers/index.js
错误  编译失败  src/reducers/counter.js
TypeError: Cannot read property 'pages' of undefined
    at isFileToBePage (/usr/local/lib/node_modules/@tarojs/cli/src/weapp.js:913:27)
    at analyzeImportUrl (/usr/local/lib/node_modules/@tarojs/cli/src/weapp.js:176:9)
    at ImportDeclaration (/usr/local/lib/node_modules/@tarojs/cli/src/weapp.js:643:13)
    at NodePath._call (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/index.js:114:17)
(node:97420) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'pages' of undefined
    at buildPages (/usr/local/lib/node_modules/@tarojs/cli/src/weapp.js:1187:27)
    at Object.build (/usr/local/lib/node_modules/@tarojs/cli/src/weapp.js:2209:9)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3
(node:97420) 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(). (rejection id: 4)
(node:97420) [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.

系统信息

Taro v1.2 及以上版本已添加 taro info 命令,方便大家查看系统及依赖信息,运行该命令后将结果贴下面即可。

👽 Taro v1.2.15


  Taro CLI 1.2.15 environment info:
    System:
      OS: macOS 10.14.2
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.2 - /usr/local/opt/node@8/bin/node
      Yarn: yarn install v0.27.5
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.22s. - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/opt/node@8/bin/npm
    npmPackages:
      @tarojs/async-await: 1.2.15 => 1.2.15 
      @tarojs/components: 1.2.15 => 1.2.15 
      @tarojs/plugin-babel: 1.2.15 => 1.2.15 
      @tarojs/plugin-csso: 1.2.15 => 1.2.15 
      @tarojs/plugin-less: 1.2.15 => 1.2.15 
      @tarojs/plugin-sass: ^1.2.17 => 1.2.17 
      @tarojs/plugin-uglifyjs: 1.2.15 => 1.2.15 
      @tarojs/redux: 1.2.15 => 1.2.15 
      @tarojs/redux-h5: 1.2.15 => 1.2.15 
      @tarojs/router: 1.2.15 => 1.2.15 
      @tarojs/taro: 1.2.15 => 1.2.15 
      @tarojs/taro-alipay: 1.2.15 => 1.2.15 
      @tarojs/taro-h5: 1.2.15 => 1.2.15 
      @tarojs/taro-swan: 1.2.15 => 1.2.15 
      @tarojs/taro-tt: 1.2.15 => 1.2.15 
      @tarojs/taro-weapp: 1.2.15 => 1.2.15 
      @tarojs/webpack-runner: 1.2.15 => 1.2.15 
      eslint-config-taro: 1.2.15 => 1.2.15 
      eslint-plugin-taro: 1.2.15 => 1.2.15 
      nervjs: ^1.3.9 => 1.3.12 
    npmGlobalPackages:
      typescript: 3.3.3333

补充信息
根据报错信息'File to import not found or unreadable: ~taro-ui/dist/style/index.scss.'可以看到是在文件名index.scss后面多加了一个点。

直接导入node_modules中的scss就不会有此问题:

  • 直接在/app.scss@import "~taro-ui/dist/style/index.scss";,问题
  • 在自定义组件的scss文件中@import "~taro-ui/dist/style/index.scss";亦无此问题
@taro-bot
Copy link

taro-bot bot commented Mar 18, 2019

欢迎提交 Issue~

如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。

Good luck and happy coding~

@js-newbee
Copy link
Contributor

@imageslr 目前解决方法有两个:

  1. 在 js 中用 import '~taro-ui/dist/style/index.scss' 引入
  2. 增加 sass 的 importer 配置,可参考 https://github.com/js-newbee/taro-yanxuan/blob/master/config/index.js

@imageslr
Copy link
Author

谢谢! @js-newbee 明早看看

@imageslr
Copy link
Author

第二个方法很简单,已经解决,多谢!

@codeyourwayup
Copy link

@imageslr 目前解决方法有两个:

  1. 在 js 中用 import '~taro-ui/dist/style/index.scss' 引入
  2. 增加 sass 的 importer 配置,可参考 https://github.com/js-newbee/taro-yanxuan/blob/master/config/index.js

大神出手完美解决问题 !
问题描述大概如下:

  1. 通过这个链接生成新的theme https://nervjs.github.io/taro-ui-theme-preview/
  2. 生成的新的主题存在一个目录里,比如 assets
  3. 然后按照这个方法, 在APP.scss里面引入进
    image
  4. 会报错

js-newbee大神的方法真的很好

@tourze
Copy link
Contributor

tourze commented Nov 1, 2019

今日测试,不行了,依然会提示缺少npm包@gzcrm/XXX/theme,开始安装...

@suneai
Copy link

suneai commented Jan 16, 2020

./node_modules/taro-ui/dist/weapp/index.js
Module not found: Can't resolve './style/index.scss'
我的报这个错误,就算是把modules全部删除了重新安装依赖也还是不行
但是运行yarn dev:h5的时候没有问题yarn dev:weapp不行

@useryechen
Copy link

@imageslr 目前解决方法有两个:

  1. 在 js 中用 import '~taro-ui/dist/style/index.scss' 引入
  2. 增加 sass 的 importer 配置,可参考 https://github.com/js-newbee/taro-yanxuan/blob/master/config/index.js

您好,请问现在项目直接从taro1升级到3.0版本,plugins配置的写法完全变了,该如何配置sass中的引入文件别名配置呢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants