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

Question

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

imageslr opened this issue 6 years ago · 8 comments

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

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

新建文件/variables.scss，内容仅有一行@import "~taro-ui/dist/style/index.scss";
/app.scss中仅有一行@import "./styles/variables.scss";
/app.js中import "./app.scss";
编译文件

期望行为
编译成功

报错信息

{ 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";亦无此问题

Answer 1 · 2019-03-18T14:37:25.000Z

欢迎提交 Issue~

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

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

Good luck and happy coding~

Answer 2 · 2019-03-18T15:42:53.000Z

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

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

Answer 3 · 2019-03-18T16:17:24.000Z

谢谢！ @js-newbee 明早看看

Answer 4 · 2019-03-19T01:48:53.000Z

第二个方法很简单，已经解决，多谢！

Answer 5 · 2019-08-29T12:57:20.000Z

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

在 js 中用 import '~taro-ui/dist/style/index.scss' 引入

增加 sass 的 importer 配置，可参考 https://github.com/js-newbee/taro-yanxuan/blob/master/config/index.js

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

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

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

Answer 6 · 2019-11-01T10:59:42.000Z

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

Answer 7 · 2020-01-16T02:57:16.000Z

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

Answer 8 · 2020-10-27T09:24:11.000Z

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

在 js 中用 import '~taro-ui/dist/style/index.scss' 引入

增加 sass 的 importer 配置，可参考 https://github.com/js-newbee/taro-yanxuan/blob/master/config/index.js

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