在 Gatsby 上运行 SASS 不起作用

2024-03-28

昨天,我能够设置 gatsby 的入门包实例并部署到 github 页面。

从那时起,我在本地更新了我的react/js 文件,这似乎在本地运行良好。现在我想编译我的 sass:

我找不到有效的解决方案:

这是我尝试安装的 sass 编译器: sass --watch asset/scss/main.scss:assets/css/style.css Node sass watch 运行,但实际上不编译任何东西。我收到一个错误:

问题:

1)自从安装了sass

./src/assets/scss/main.scss
Module parse failed: /Users/reenaverma/development/GATSBY/src/assets/scss/main.scss Unexpected character '#' (1:8)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:8)
    at Parser.pp$4.raise (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.pp$7.next (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2413:10)
    at Parser.pp.eat (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:536:12)
    at Parser.pp$1.parseStatement (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:728:71)
    at Parser.pp$1.parseTopLevel (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/reenaverma/development/GATSBY/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/Users/reenaverma/development/GATSBY/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/Users/reenaverma/development/GATSBY/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/reenaverma/development/GATSBY/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/reenaverma/development/GATSBY/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/reenaverma/development/GATSBY/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/reenaverma/development/GATSBY/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:528:3)
 @ ./src/layouts/index.js 29:0-35

2)我什至尝试过此链接,但这也不起作用:https://www.npmjs.com/package/gatsby-plugin-sass https://www.npmjs.com/package/gatsby-plugin-sass

3)由于某种原因,我也无法部署到Github/git push origin master / npm run deploy

error: ./src/assets/scss/main.scss
  Module parse failed: /Users/reenaverma/development/GATSBY/src/assets/scss/main.scss Unexpected character '#' (1:8)
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected character '#' (1:8)
      at Parser.pp$4.raise (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2221:15)
      at Parser.pp$7.getTokenFromCode (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2756:10)
      at Parser.pp$7.readToken (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2477:17)
      at Parser.pp$7.nextToken (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2468:15)
      at Parser.pp$7.next (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:2413:10)
      at Parser.pp.eat (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:536:12)
      at Parser.pp$1.parseStatement (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:728:71)
      at Parser.pp$1.parseTopLevel (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:638:25)
      at Parser.parse (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:516:17)
      at Object.parse (/Users/reenaverma/development/GATSBY/node_modules/acorn/dist/acorn.js:3098:39)
      at Parser.parse (/Users/reenaverma/development/GATSBY/node_modules/webpack/lib/Parser.js:902:15)
      at NormalModule.<anonymous> (/Users/reenaverma/development/GATSBY/node_modules/webpack/lib/NormalModule.js:104:16)
      at NormalModule.onModuleBuild (/Users/reenaverma/development/GATSBY/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
      at nextLoader (/Users/reenaverma/development/GATSBY/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
      at /Users/reenaverma/development/GATSBY/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
      at Storage.finished (/Users/reenaverma/development/GATSBY/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
   @ ./src/layouts/index.js 28:0-35

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] /cdn-cgi/l/email-protection deploy: `gatsby build --prefix-paths && gh-pages -b master -d public`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] /cdn-cgi/l/email-protection deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/reenaverma/.npm/_logs/2018-05-30T13_34_31_289Z-debug.log

请帮忙!我需要今晚之前排序:

这是我昨天的代码......但我已经更新了 3 个 js 文件。但这在本地有效。似乎尝试运行 sass 破坏了我的工作:

https://github.com/ReenaVerma/reenaverma.github.io/tree/master https://github.com/ReenaVerma/reenaverma.github.io/tree/master


以下两个步骤对我有帮助:

1) run npm install gatsby-plugin-sass下载 Gatsby 的 sass 插件;

2) add gatsby-plugin-sass to plugins的部分gatsby-config.json file.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Gatsby 上运行 SASS 不起作用 的相关文章

随机推荐

  • 如何在R中拆分列?

    我也想以同样的方式拆分同一列 我想按如下方式执行此操作 但它无法正常工作 我使用的代码是t38kbat read table test38kbat txt header FALSE head t38kbat t38kbat lt separ
  • 如何在IE9中启用使用ajax加载本地文件

    我知道存在起源问题 但设置网络服务器不是这里的一个选项 Firefox v14 加载本地文件没有问题 添加 allow file access from files 后Chrome没有问题 有什么办法也修复IE9吗 谢谢 编辑 我找到了解决
  • Android SuperUser 应用程序如何检测应用程序请求 root?

    我正在编写一个将使用的应用程序su执行linux内核中的一些命令 我想知道超级用户如何确定应用程序正在请求 root 权限 另外 是否有任何已知的方法 通过混淆 可以绕过此检查 换句话说 尽管 Android 清单文件中没有明确请求权限 A
  • Mysqli 查询返回空结果

    我试图使用以下代码从我的数据库获取一些数据
  • Jetpack 撰写预览因 hiltViewModel<>() 崩溃

    我使用 compose 版本 1 1 0 beta03 和 hilt navigation compose 1 0 0 beta01 这是我的可组合代码 fun EngagementBotChart modifier Modifier Mo
  • 两条线相交的算法?

    我有2行 两条线都包含 X 和 Y 两个点 这意味着它们都有长度 我看到两个公式 一个使用行列式 一个使用普通代数 哪个计算效率最高 公式是什么样的 我很难在代码中使用矩阵 这就是我目前所拥有的 它可以更有效吗 public static
  • spring-cloud-starter-config POST /env 不起作用

    我有一个小的 Spring Boot Web 应用程序 可执行 jar 它在 application properties 文件中有一些自定义属性 我的目标是能够在运行时动态更改这些属性 而无需运行构建 部署或重新启动 java 进程 sp
  • 从 kdb 中的字符串中提取数字

    我对 kdb q 很陌生 我遇到过从字符串中提取数字的问题 有什么建议么 Example AZXER 1234 MARKET should output 1234 Assume that there is only one number i
  • JOIN 语法中缺少关键字

    在提出问题之前我已经搜索过该网站 但没有遇到相关的内容 我确信这是一个荒谬的基本错误 我只从 0 计算机背景学习 Oracle SQL 大约 4 个月 我计划在本月底学习 1z0 051 所以复习一下所有章节 在这个子句中 我试图获取工资高
  • 要嵌入 .NET 应用程序的 XPS 或 XAML 查看器?

    是否有查看器对象或 ActiveX 控件可用于在我的 NET 应用程序中嵌入 XPS 文档或 XAML GUI 您可以使用元素主机控制 http msdn microsoft com en us library system windows
  • 使用express模块​​时找不到模块“cookie”

    我需要你的帮助来使用express构建rest API 我已经尝试了很多版本的express 也有 CookieParser 中间件 但我刚刚收到上述错误 Error Cannot find module cookie at Functio
  • 无法在本地或远程找到“开发”或“主”分支。 - 语义gitversion

    我在 azure 中有一个存储库 它有默认分支 main 另外 我在 yml 文件中有一项用于语义版本控制的任务 task gittools gitversion gitversion task GitVersion 5 displayNa
  • TypeError:注册不是在React中使用React Hook Form的函数

    The Error Message If i dont use the Inputs inside div then it works perfectly but when i use Input inside div it shows m
  • Spring SseEmitter 导致响应提交后无法转发异常

    给定一个简单的控制器 其方法如下 RequestMapping method RequestMethod GET value id update public ResponseEntity
  • 如何使用 karma 在测试文件之间共享模拟?

    我正在一个有角度的应用程序中工作 其中许多测试文件共享相同的模拟 我想知道如何提取这些模拟并将它们放入单独的文件中 我尝试创建一个对象并在测试中重用它 但出现异常 ReferenceError 找不到变量 需要 业力文件 module ex
  • 使用 jQuery 检查 div 是否隐藏

    这是我的div div style display none div 然后我有一个显示按钮 当您单击时将显示 div show click function car2 show 所以现在我想检查 div 是否 car2在表单提交之前仍然隐藏
  • 如何使用键盘快捷键转到 VS Code 中的下一个错误(不是下一个问题)?

    In VS Code the F8 keyboard shortcut takes you to the next problem Problems can be errors warnings or info I want to cycl
  • 每组平均值以及组中变量的数量[重复]

    这个问题在这里已经有答案了 我想生成一个表 其中包含每个范围的组 每个组中变量的平均值和计数 我有一个如下所示的 data frame Variable Shap 1 0 10 6 0 50 7 0 30 5 0 40 9 0 10 9 0
  • 在后台停止音频

    有一个名为 IHeartRadio 的应用程序 可让您设置睡眠计时器 该计时器将在指定的时间间隔后关闭音频 您首先选择要收听的电台 然后选择睡眠时间 之后广播电台将停止播放 应用程序不需要位于前台即可发生这种情况 应用程序如何在后台停止音频
  • 在 Gatsby 上运行 SASS 不起作用

    昨天 我能够设置 gatsby 的入门包实例并部署到 github 页面 从那时起 我在本地更新了我的react js 文件 这似乎在本地运行良好 现在我想编译我的 sass 我找不到有效的解决方案 这是我尝试安装的 sass 编译器 sa