Looking for custom SCSS clarification about hexo-theme-doc

[rbarilani]

@gavinpatkinson Thanks for your feedback. I agree, the documentation about SASS usage, at the moment is unclear.

We are working on improving SASS usage and related documentation on this PR.
We will include modifications also based on your feedback. Regarding your questions:

To make custom style do you have to install the theme with git?

No. Installing the theme with npm still the preferred (only) way.

For example, where is this file supposed to be located? Does it need to be in the theme dir or the project dir? Both have the same filenames.

In the project dir at source/style/doc.scss

Also, does this /styles/ dir supposed to have an s at the end? source/styles/doc.scss

No. There is a typo in the documentation (thanks for pointing that out), it should be source/style/doc.scss, without s.

This line just appears to be wrong:
@import "../node_modules/hexo-theme-doc/_doc.scss"
and should be
@import "../../node_modules/hexo-theme-doc/_doc.scss"

Yes, you are right, there is a typo, I confirm that it should be @import "../../node_modules/hexo-theme-doc/_doc.scss"

BTW I will work on this topic here in the next days.

[CosmoMyzrailGorynych]

So I have

$doc-color-primary: #446adb;

@import "./../../node_modules/hexo-theme-doc/_doc.scss"

in my docs/source/style/doc.scss, and I get another error:

Error: File to import not found or unreadable: ../../../node_modules/dress-code/dist/sass/dress-code.
Parent style sheet: /mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/hexo-theme-doc/source/style/_doc/index.scss
    at Object.module.exports.renderSync (/mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/node-sass/lib/index.js:439:16)
    at Hexo.<anonymous> (/mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/hexo-renderer-sass/lib/renderer.js:25:23)

But there is no module like dress-code in node_modules. The module itself can be found here.

---

It is a devDependency for hexo-theme-doc, but going into its folder and doing full nmp install generates even more new errors:

Error: watch /mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/themes/doc/node_modules/lodash/isBoolean.js ENOSPC
    at FSWatcher.start (fs.js:1409:19)
    at Object.fs.watch (fs.js:1435:11)
    at createFsWatchInstance (/mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/chokidar/lib/nodefs-handler.js:228:14)
    at FSWatcher.NodeFsHandler._handleFile (/mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/chokidar/lib/nodefs-handler.js:255:21)
    at FSWatcher.<anonymous> (/mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/chokidar/lib/nodefs-handler.js:473:21)
    at FSReqWrap.oncomplete (fs.js:171:5)

---

I installed lodash to the root package and that dress-code error returned:

Error: File to import not found or unreadable: ../../../node_modules/dress-code/dist/sass/dress-code.
Parent style sheet: /mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/hexo-theme-doc/source/style/_doc/index.scss
    at Object.module.exports.renderSync (/mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/node-sass/lib/index.js:439:16)
    at Hexo.<anonymous> (/mnt/36c3db7c-dce7-48e9-8d90-14e14b8433ce/_namespace/_cat/_NOVA_/docs/node_modules/hexo-renderer-sass/lib/renderer.js:25:23)

[CosmoMyzrailGorynych]

Sooooo I did ln -s ./../../dress-code/ ./node_modules/hexo-theme-doc/node_modules/dress-code and hooray, now I have a blueish site and lots of frustration 😐

[g-a-v-i-n]

After following rbarilani's steps above, one more thing I had to do was cd into the theme and npm install. Then I had to change my ../../node_modules/hexo-theme-doc/_doc.scss" line to point to the alias of that module in my root themes folder.

[rbarilani]

@gavinpatkinson @CosmoMyzrailGorynych Thanks for your patience.

As I mentioned we are working on improving the SASS usage, we already merged two relevant PRs that should make SASS import easier by avoiding relative imports, it's just not yet released on npm.

When released you will be able to "just" do:

@import "hexo-theme-doc/_doc.scss"

\\ etc.

P.S. a prerequisite for that working properly is that dependencies are installed in a flatten way (normal behaviour of npm > 3) so the resulting project folder should look like:

_config.yml
package.json
source
  style/
     doc.scss
node_modules
  hexo-theme-doc/
  dress-code/

[g-a-v-i-n]

Thank you for working on this–looking forward to the npm release.

[rbarilani]

@gavinpatkinson we have just released 1.0.0-rc.

For how to setup instructions we updated the documentation site or you can also refer to the gh-pages-source branch of this repository, SASS customisation is also used there (documentation site source).

[rbarilani]

@gavinpatkinson Feel free to reopen this issue if still doesn't work for you after updating to latest version!

[smeijer]

I tried adding custom css according to the gh-pages-source linked two posts above. But still had an error which makes starting the project impossible:

FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: File to import not found or unreadable: ../../../node_modules/dress-code/dist/sass/dress-code.
    at Object.module.exports.renderSync (c:\dev\project-docs\node_modules\node-sass\lib\index.js:439:16)
    at Hexo.<anonymous> (c:\dev\project-docs\node_modules\hexo-renderer-sass\lib\renderer.js:25:23)
    at Promise.then.text (c:\dev\project-docs\node_modules\hexo\lib\hexo\render.js:61:21)
    at tryCatcher (c:\dev\project-docs\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (c:\dev\project-docs\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (c:\dev\project-docs\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromiseCtx (c:\dev\project-docs\node_modules\bluebird\js\release\promise.js:606:10)
    at Async._drainQueue (c:\dev\project-docs\node_modules\bluebird\js\release\async.js:138:12)
    at Async._drainQueues (c:\dev\project-docs\node_modules\bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues (c:\dev\project-docs\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:810:20)
    at tryOnImmediate (timers.js:768:5)
    at processImmediate [as _immediateCallback] (timers.js:745:5)

Running npm install in c:\dev\project-docs\node_modules\hexo-theme-doc fixed it.