Hoy encontré el proyecto usando este código para definir un componente en style.scss así:

 > st-footer { padding: 5px 10px; text-align: right; &, & a { color: $baseFontColor; } a { @extend %transition-all; text-decoration: none; } a:hover { color: $baseFontHoverColor; } }

luego usando el st-footer en el archivo vue template.html de esta manera:

 <st-footer> <st-span v-show="!loading && apiName">via <a :href="result.link" target="_blank" v-text="apiName"></a></st-span> </st-footer>

¿El archivo scss define una nueva etiqueta html? Estoy buscando en Internet y no encontré documentos que me digan que usar > en el archivo scss, ¿de qué se trata la gramática > ? pero la consola muestra que no se pudo encontrar el componente, esta es la información de advertencia de la consola:

 vue.common.js:1137 [Vue warn]: Unknown custom element: <st-footer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

¿Qué debo hacer para corregir el mensaje de información de advertencia? esta es la configuración para analizar el archivo scss en webpack ( 4.4.0 ):

 { test : /\.(scss)$/ , use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { modules: true, sourceMap: true } }, "sass-loader" ] }

la versión de sass es ^1.22.10 , la versión de sass-loader es ^9.0.0 .