Installing dependencies (like node-sass) in a custom theme

[whoan]

I'm creating a custom theme for my blog and I don't find a way to avoid modifying the vuepress project itself, to make the theme build properly.

I am currently having problems with the following dependencies:

node-sass
sass-loader

If I add them to vuepress itself it works fine but I have the idea to make the repo public, so I wish the repo was easy to install.

I tested modifying the file lib/webpack/createBaseConfig.js (with partial success) adding this line:

diff --git a/lib/webpack/createBaseConfig.js b/lib/webpack/createBaseConfig.js
index f2a6ec8..cd3c012 100644
--- a/lib/webpack/createBaseConfig.js
+++ b/lib/webpack/createBaseConfig.js
@@ -60,6 +60,7 @@ module.exports = function createBaseConfig ({
     .set('symlinks', true)
     .modules
       // prioritize our own
+      .add(path.resolve(__dirname, themePath + '/node_modules'))
       .add(path.resolve(__dirname, '../../node_modules'))
       .add(path.resolve(__dirname, '../../../'))
       .add('node_modules')

...it worked adding my custom theme to the vuepress project (in the folder docs/.vuepress/) but it didn't work with the vuepress cli (ie: vuepress dev failed).
If it worked, I was thinking in make a PR to add that line to the vuepress repo but it seems it is not enough.

What is the correct way to handle this kind of dependencies in a custom theme?
Notice it's easier with other kind of assets (eg: bootstrap) and I could hanlde them creating a package.json in the custom theme and using the proper paths in my code.

---

This is my environment but I think it's not relevant in this case:

• Arch Linux 4.16.6-1
• Node.js 9.11.1
• VuePress 0.8.4
• Firefox 59.02
• Global install
• I use yarn

[ulivz]

You should tell us the error stack first, then give the workaround. or I don't know what happened.

[whoan]

This is the error stack:

ERROR in ./.vuepress/theme/Layout.vue
Module not found: Error: Can't resolve 'sass-loader' in '/home/bambino/my-custom'
@ ./.vuepress/theme/Layout.vue 9:0-66
@ ../.config/yarn/global/node_modules/vuepress/lib/app/.temp/routes.js
@ ../.config/yarn/global/node_modules/vuepress/lib/app/app.js
@ ../.config/yarn/global/node_modules/vuepress/lib/app/clientEntry.js
@ multi ../.config/yarn/global/node_modules/vuepress/lib/app/clientEntry.js

And this is the way I'm using the dependency in the Layout.vue file:

<style lang="scss">
#some {}
</style>

If I remove that code, obviously it all works.

[meteorlxy]

@whoan

What's your point?

Running yarn add node-sass sass-loader in your custom theme didn't help?

[whoan]

@meteorlxy No, adding the dependencies is not enough.

I've just solved it adding a config.js in my repo with this:

const path = require('path')

module.exports = {
    title: 'Some',
    chainWebpack: (config, isServer) => {
        config.resolveLoader
            .modules
            .add(path.resolve(__dirname, './node_modules'))
    }
}

With that, webpack will also look for sass-loader in my repo's node_modules.

[meteorlxy]

I repro this issue. I introduce moment in my custom theme, and it can't be resolved correctly.

chainWebpack is a temporary solution, but at current stage it cannot be resolved by the custom theme itself.

I think it should be re-opened. @ulivz

[meteorlxy]

@whoan Are you using yarn link to link local vuepress to your project?

I tried to make a repo to reproduce this issue, but failed.
Then I realised that I have been using yarn link to link my local vuepress to my project, in which has this problem

[whoan]

@meteorlxy I am not using yarn link.

I didn't have the problem using packages like moment (which I am using), the problem was with loaders (sass-loader or less-loader).

---

Te reproduce the problem, add this code to a component:

<style lang="scss">
#some {}
</style>

.. add the following dependencies to your theme:

node-sass
sass-loader

... and execute vuepress dev

[meteorlxy]

#193

[ulivz]

I tried to reproduce it for many times, but cannot reproduce it. :(

So, could you guys provide us a reproduction repo for each issue?

[ocavue]

@ulivz

I have created a reproduction repo: https://github.com/ocavue/vuepress-saas-bug-example. You can find my reproduction steps in README.md

node-sass and sass-loader are vuepress-theme-project's dependencies. vuepress-theme-project is vuepress-project's dependencie (true?). But I can't find node-sass and sass-loader in vuepress-project/node_modules. Why? Did I miss something?

BTW, if I install node-sass and sass-loader in vuepress-project, everything is OK:

$ cd vuepress-project
$ yarn add -D sass-loader node-sass
$ ls ./node_modules/ | grep sass
node-sass
sass-graph
sass-loader
$ yarn run dev  # no error