在Gatsby上运行SASS无效 [英] Running SASS on Gatsby not working
问题描述
昨天,我能够设置gatsby的入门包实例并部署到github页面。
Yesterday, I was able to setup a starter-pack instance of gatsby and deploy to github pages.
从那时起,我就在本地更新了react / js文件,该文件似乎在本地运行良好。现在我想编译我的Sass:
Since then, I've updated my react/js files locally, which seemed to run fine locally. Now I want to compile my sass:
我找不到可行的解决方案:
I can't find a decent solution which works:
这里是我尝试安装的sass编译器:
sass --watch asset / scss / main.scss:assets / css / style.css
节点sass监视运行,但实际上不编译任何东西。我收到错误消息:
Here's the sass compiler I tried to install: sass --watch assets/scss/main.scss:assets/css/style.css Node sass watch runs, but doesn't actually compile anything. I get an error instead:
问题:
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
2) I've even tried this link, but this doesn't work either: https://www.npmjs.com/package/gatsby-plugin-sass
3)由于某些原因,我也无法部署到Github / git push origin master / npm run deploy
3) For some reason, I also can't deploy to 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! 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
请帮助!我需要按今晚排序:
PLEASE HELP! I need this sorted by tonight:
这是昨天的代码。...但是我更新了3个js文件。但这在本地有效。似乎试图运行sass破坏了我的工作:
Here's my code from yesterday.... But I have updated 3 js files. But this works locally. Seems trying to run sass is breaking my work:
https://github.com/ReenaVerma/reenaverma.github.io/tree/master
推荐答案
以下2个步骤对我有帮助:
The following 2 steps has helped me:
1)运行 npm install gatsby-plugin-sass
为Gatsby下载sass插件;
1) run npm install gatsby-plugin-sass
to download sass plugin for Gatsby;
2)将 gatsby-plugin-sass
添加到 plugins < gatsby-config.json 文件的/ em>部分。
2) add gatsby-plugin-sass
to plugins section of the gatsby-config.json file.
这篇关于在Gatsby上运行SASS无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!