vue-cli@3添加sass(vue项目模板封装系列)

2021-8-26    前端达人

前言

上一期分享了如何在vue-cli3的框架中,封装mixinsmodule 。本期将分享如何在vue项目中添加sass
在这里插入图片描述

GitHub项目地址:https://github.com/jiangjiaheng/web-template

关于sass

本文默认你对sass有一定的了解,并且阅读过相关的官方文档,因此本文就不在赘述关于sass的基础知识。

在这里插入图片描述
sass官方文档:https://www.sass.hk/

添加方式

1. 创建项目时选择预处理器sass

$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features 
  • 1
  • 2
  • 3
  • 4

移动上下键选择Manually select features:手动选择创建项目的特性。

显示如下:

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

移动上下键在CSS Pre-processors,按提示点击空格键选择CSS-processors

显示如下:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
  LESS
  Stylus 
  • 1
  • 2
  • 3
  • 4

选择第一个SCSS/SASS作为我们的CSS预处理器。

完成后项目会帮我们安装sass-loader node-sass

2. 手动安装sass-loader

如果在创建项目没有选择CSS预处理器,我们也可以手动安装sass-loader node-sass来集成scss

npm install -D sass-loader node-sass 
  • 1

使用

完成添加后,我们只需要在style指定langscss即可,无须多余操作:

<style lang="scss" scoped>
$color: red;

h1 {
  color: $color;
}
</style>




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档