Answer the question
In order to leave comments, you need to log in
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
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'
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-name
with the file name. Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question