问题描述：在vue框架开发中，需要对指定单页面单独设置scss文件样式。创建成功后，若将scss样式放在单页面中通过style设置scss类别则页面解析正常。但通过@import引入scss文件后，文件样式就不能正常解析，只能解析其中一部分的样式效果。那么该情况是什么原因呢？

scss文件：table.scss

.test{
  color:#f00;
  span{
    font-weight: bold;
  }
}

在单页面中如果把代码取出放在单页面中设置，那么该样式正常。

<style lang="scss" scoped>
  .test{
    color:#f00;
    span{
      font-weight: bold;
    }
  }
</style>

若将该样式放置在tabls.scss文件中通过@import引入，则只能解析color颜色值，字体加粗不能正常解析。

<style lang="scss" scoped>
  @import  url('~/assets/css/table.scss') ;//该引入效果会解析异常
</style>

错误分析：引入 scss 文件时，使用 @import url('xxx.scss')语法，会被解析为 css 文件，里面的变量不会生效。

正确写法如下：

<style lang="scss" scoped>
  @import  '~/assets/css/table.scss' ;
</style>

结语：这些错误是一些很细微的错误，如果稍不注意就会出错。