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

最新推荐文章于 2024-08-20 10:33:34 发布

完美句号

最新推荐文章于 2024-08-20 10:33:34 发布

阅读量409

点赞数 6

文章标签： vue.js 前端 javascript 性能优化系统架构软件工程前端框架

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135293075

版权

本文介绍了在使用yarn安装Sass-loader和node-sass时遇到的TypeError错误，涉及.resolve函数问题。同时讨论了scss引入和scopedCSS的用法，以及如何配置alias处理目录结构。

摘要由CSDN通过智能技术生成

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样式会在所有组件中进行渲染.

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