A
A
Alexander2020-03-21 11:03:26
Sass
Alexander, 2020-03-21 11:03:26

Is it possible in a .vue component to get the component name or component filename as a variable in sass?

Maybe there is some library?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexey Nikolaev, 2020-03-21
@Heian

You are inventing an unnecessary bicycle (almost wrote "it seems" according to the precepts of CoCK of my galley). The class and component name are different things, they have different naming conventions. So, the css-class should not be written by StudyCaps (as opposed to the name of the component), and, moreover, it may differ somewhat - this is normal.
On this topic

Vue.component('my-thing', {
    name: 'mything'
})
// later
vm.$options.name // 'mything'

A
Aetae, 2020-03-21
@Aetae

In principle, the file name can be obtained something like this:
vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData({resourcePath}) {
          const vueFileName = resourcePath.match(/([^\\\/]+).vue$/i);
          if(vueFileName)
            return `$vue-file-name: "${vueFileName[1]}"`
        }
      }
    }
  }
}
In every Vue component in sass you will now have a variable $vue-file-namewith the file name.
But why?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question