How to watch file changes and run script?

[smyth64]

Hey guys,
This may be a simple question, but I want to do something like this:

If a .vue file changes, I want to run some a script.
The script generates dynamically a .sass file which I want to import then in my component .sass files.

Maybe you have an idea :)

_{This question is available on Nuxt.js community (#c995)}

[pi0]

Hi. Would please explain more about your solution maybe we could help better?

[smyth64]

Hey @pi0 :)

I want to be able to share variables in BOTH, sass and js.

So here is my solution:

I have my .json file with my variables:

{
  "lightblue": "#D2ECF6",
  "darkblue": "#72B6DE",
  "lightgrey": "#D1DDE4"
}

This script inside the server.js now generates my sass file and puts it into assets/variables.sass.

let variables = require('./style/variables.json')
let sassVariables = ''
_.each(variables, (val, key) => {
  sassVariables += `$${key}: ${val}\n`
})

fs.writeFileSync('./assets/variables.sass', sassVariables)

Now I can import my sass variables

@import "~assets/variables"
.card
  background: $lightblue

My plugin here makes all variables globally available with this.$styleVars

import Vue from 'vue'

let styleVars = require('../style/variables')

export default (ctx) => {
  Vue.use(Vue => {
    if (!Vue.prototype.hasOwnProperty('$styleVars')) {
      Object.defineProperty(Vue.prototype, '$styleVars', {
        get () { return styleVars }
      })
    }
  })

  ctx.app.$styleVars = styleVars
}

So now I can use my sass variables also in my components

Example:

ui-spacer(
  :topColor="$styleVars.lightgrey"
  :bottomColor="$styleVars.darkblue"
)

What I miss now is that I want my script in the server.js to reload, everytime a .vue or .sass file changes.

Best Regards
Michael

[pi0]

Hmm seems interesting :) Did you tried vue-styled-components? which i think tries to solve same problem.

[didiself]

@pi0
if I want to any other watch, get params from a specific url that trigger npm run generate.

that's for other people to update the static pages.
Any suggestion??

[pi0]

I think currently the only way would be using webpack plugins. Advanced module and tapable system will come in next releases and probably useful for such cases.

[pi0]

This is now possible using latest rc6 using module hooks. Please see:

• https://nuxtjs.org/guide/modules
• https://nuxtjs.org/api/internals-builder (I suggest using generate hook to emit your assets in the same phase of .nuxt file generating)

[yoyo837]

@pi0
I have a similar need.

Nuxt only monitor the specified files and directories, such as pages, layouts and so on.

I have added some other source folder, and at some point I need to cover some of the files in the pages directory. In other words that I want to dynamically modify the contents of the page at run time. Can you give me some good advice？

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.