vue项目实战系列十三：sass引入

1. 安装:

yarn add sass-loader@7.3.1 --dev
yarn add node-sass --dev

注:
①. sass-loader依赖于node-sass

(1). 报错:

Module build failed: TypeError: this.getResolve is not a function
at Object.loader (path/node_modules/sass-loader/dist/index.js:52:26)

2. 注释:

①. /* */         => css中显示
②. //            => css中不显示
③. /*重要注释!*/   => 压缩不会被删掉

3. 引入sass文件:

<style scoped lang="scss" type="text/css">
  @import "~common/css/variable";                 // ~表示根目录,使用前需要配置common alias别名
  @import "~common/css/mixin";

  .m-header {
    @include bg-image('~common/images/logo');      // 引入src目录下common的图片
    font-size: $font-size-large;
  }
</style>

注:
①. scoped表示局部部署,否则css样式会在所有组件中进行渲染.

②. ~代表当前目录的根目录.