Today I found the project using this code to define a component in style.scss like this:

> st-footer {
      padding: 5px 10px;
      text-align: right;

      &, & a {
        color: $baseFontColor;
      }
      a {
        @extend %transition-all;
        text-decoration: none;
      }
      a:hover {
        color: $baseFontHoverColor;
      }
    }

then using the st-footer in the vue template.html file like this:

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

does the scss file define a new html lable? I am searching from internet and found no docs to tell me that using > in the scss file, what is the grammer about >? but the console shows could not found the component, this is the console waring information:

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.

what should I do to fix the warning information message? this is the config to parse scss file in webpack(4.4.0):

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

the sass version is ^1.22.10, the sass-loader version is ^9.0.0.