在盖茨比上运行 SASS 不起作用



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

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

我找不到一个像样的解决方案:

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

问题:

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

3(由于某种原因,我也无法部署到Github/git推送源主/npm运行部署

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! gatsby-starter-default@1.0.0 deploy: `gatsby build --prefix-paths && gh-pages -b master -d public`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the gatsby-starter-default@1.0.0 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

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

1(运行npm install gatsby-plugin-sass为盖茨比下载sass插件;

2( 将gatsby-plugin-sass添加到gatsby-config.json文件的插件部分。

最新更新