新建项目运行dev:h5报错

[dengshihao]

问题描述

新建项目运行dev:h5报错

复现步骤

taro init demo
cnpm i
npm run dev:h5

/**
 * 这段注释后可以贴代码
 * 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间
 * 代码提供不全或代码格式混乱的 issues 【有可能会被忽略】
 * 
 * 查看如何插入代码：https://coding.net/help/doc/project/markdown.html#i-5
 */

期望行为

demo运行应该正常

报错信息

Failed to compile.

./node_modules/_@[email protected]@@tarojs/components/src/components/video/style/index.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

@charset "UTF-8";
|
| .taro-video {

系统信息

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[dengshihao]

Taro v2.2.9

[luckyadam]

提供一下 demo 看看

[fishjar]

遇到同样问题

[abellee]

@luckyadam 你直接按你们官方的安装教程走一遍运行就能出现这个问题

[leoliew]

+1 同样问题

使用: Typescript
模版类型： redux
css预处理脚本： less
选了这几个之后用 h5 编译就会报错了

最小可复现问题仓库 :
https://github.com/leoliew/taro_debug_demo

@luckyadam

[hy08]

官方教程都跑不起来?

[a591371947]

所以这个问题解决了吗

[zoeblow]

解决了没，
第一步，就遇到坑， 没想到，坑里还有水，水下藏着钉，钉子还有尖儿，

[iaminvictus1993]

mark

[54853315]

我今天也遇到了类似问题，感觉还是webpack、 sass-loader向设定的问题，我目前本机的版本是Taro2.2.7 Taro-UI 2.3.1。

$yarn dev:weapp

./node_modules/taro-ui/dist/style/index.scss 6:0
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| /* Variables */
> @import './variables/default.scss';
| 
| /* Mixin */

我业务代码啥也没动，就升级包，降包。

我整个程序（前端、后端）都开发完了，想优化下。

这几天开发遇到了不下5个问题，有Taro的有Taro-UI的。有些问题看到有人提过，并且还在后续的版本中似乎有修复，所以整个项目历程从Taro2.0升到了2.2.1（前期我已经花了时间解决兼容问题了），然后又遇到个问题进行了几天搜索和排查，需要升到2.2.7。

今天因为一个Taro的bug，在Taro-UI（没错……隔壁遇到的bug，看issue里作者将Bug归属于Taro）提示到该问题用其他手法掩盖了，需要升级到v2.3.4。

然后把Taro-UI也从2.3.1升级了2.3.4 boom。

下边这样重装后，问题依旧：

rm package-lock.json yarn.lock 
rm rf ./node_modules
rm -rf ~/.node-gyp/
yarn

太刺激了，一个坑开始一连串的坑。

我已经准备弃坑了……

我的源代码：https://github.com/54853315/weapp-MrsZhangPrivateKitchen

---

刚刚我用taro init test弄了个新项目：

[54853315]

Taro v2.2.9

https://nervjs.github.io/taro/docs/styles-processor/

[yanguoyu]

按照 @54853315 添加了 sass 解析插件后确实能正确运行。
但是这样子感觉有点奇怪，我创建项目的时候选择的less，结果我还得配置一个sass才能运行。

[54853315]

按照 @54853315 添加了 sass 解析插件后确实能正确运行。
但是这样子感觉有点奇怪，我创建项目的时候选择的less，结果我还得配置一个sass才能运行。

是sass和less都需要单独安装，比如你用less，你就安装less。

我用sass，我就需要安装sass。

从2.2.8开始，taro默认只支持css。

这个公告的位置太隐蔽了，最Basic的“快速安装”里没有提到，偶然发现的……

[yanguoyu]

我用的 less , 但是 @Taro/Components 里面有 sass

[littcc]

我用的 less , 但是 @Taro/Components 里面有 sass

配置起来确实相当奇怪，

[54853315]

我用的 less , 但是 @Taro/Components 里面有 sass

https://github.com/NervJS/taro/blob/v2.2.9/package.json

[54853315]

今天试了一下，我将yarn环境升级到2.2.9，然后taro init test一个项目，在装好后，把package.json和config/index.js(webpack)copy到我原来的项目里，然后删除node_moulde，然后安装。

现在已经好了QAQ 我哭出了声，我感觉是2.2.7的依赖有问题啊～

以下是过程：

# 安装当前最新，即为2.2.9
yarn global add @tarojs/cli 
# 创建一个测试用的项目
taro init test
#等待安装完毕后，运行确保没有问题
yarn dev:h5
# 将package.json config/index.js 覆盖掉你遇到问题的项目下的文件
rm -rf node_modules yarn.lock 
yarn install
yarn dev:weapp

这样一套下来我不需要单独按照https://nervjs.github.io/taro/docs/styles-processor/ 中说的那样去安装sass，因为我在taro init 时指定了sass。

好颠………………

[KunCho]

出现Module parse failed: Unexpected character '@' (1:0)错误，在项目跟目录下执行命令：npm install @tarojs/plugin-sass 。
安装后重新npm run dev:h5就可以了。

[guan919]

同样的问题 Taro v2.2.9

预选less 就出现 Module parse failed: Unexpected character '@' (1:0)错误

运行 npm install @tarojs/plugin-less 后依然无效

预选sass 正常运行 npm run dev:h5

[ZakaryCode]

同样的问题 Taro v2.2.9

预选less 就出现 Module parse failed: Unexpected character '@' (1:0)错误

运行 npm install @tarojs/plugin-less 后依然无效

预选sass 正常运行 npm run dev:h5

当前确实还存在该问题，可以先将 @tarojs/plugin-sass 也装上临时解决该问题

[racall]

taro 2.2.15. 出现此问题 可以将 @tarojs/plugin-sass 也装，然后在config/index.js中 plugins里面添加：@tarojs/plugin-sass

  plugins: [
    '@tarojs/plugin-sass',
    '@tarojs/plugin-less',
    '@tarojs/plugin-terser'
  ],

[ZakaryCode]

taro 2.2.15. 出现此问题 可以将 @tarojs/plugin-sass 也装，然后在config/index.js中 plugins里面添加：@tarojs/plugin-sass

  plugins: [
    '@tarojs/plugin-sass',
    '@tarojs/plugin-less',
    '@tarojs/plugin-terser'
  ],

未能复现，如尝试新版本依旧存在可以提交一个新的issue，并提供可复现的demo