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

最新推荐文章于 2025-06-24 14:24:29 发布

原创

最新推荐文章于 2025-06-24 14:24:29 发布 · 4.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #sass

本文介绍了在vue-cli@3项目中添加sass的两种方法：创建项目时选择预处理器和手动安装sass-loader。详细步骤包括选择预处理器选项和手动运行安装命令。集成后，直接在样式文件中使用sass语法即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

上一期分享了如何在vue-cli3的框架中，封装mixins，module 。本期将分享如何在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

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

显示如下：

? Check the features nee

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Web Boy

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue cli 安装使用sass

m0_65894854的博客

02-27

2134

vue cli 安装使用sass

在 vue-cli v3.0 中使用 SCSS/SASS的方法

08-27

关于如何在 vue-cli v3.0 中使用 SCSS/SASS，这里提供三种方案。感兴趣的朋友通过本文一起学习吧

参与评论您还未登录，请先登录后发表或查看评论

vue-cli3 使用全局定义的sass

qq_42143163的博客

05-26

522

1.新建sass 文件 2.在vue.config.js 设置注：新版 sass-loader prependData 旧版data 3.页面引入使用

Vue 3 项目中安装 Sass

PrimaryColor

06-24

591

在 vue.config.js 中配置 (Vue CLI 项目)

Vue-cli add sass modules

weixin_30411239的博客

10-09

204

终端cd至要安装的文件夹中　　　再执行以下命令安装node-sass 和 sass-loader npm i node-sass sass-loader --save-dev 在需要使用scss地方引入: <style lang = "scss"> @import "XXX/xxx.scss" </styl...

vue2.0添加sass

丿灬安之若死

12-26

311

遇到错误： Syntax Error: Error: Node Sass version 7.0.0 is incompatible with ^4.0.0. yarn remove node-sass yarn add sass

vue-cli中配置sass

qq_45784580的博客

02-21

287

九、注释、数据类型、数组、运算 1、注释 /* * / 多行注释 // 单行注释 Sass 支持标准的 CSS 多行注释，以及单行注释，多行注释会被完整输出到编译后的 CSS 文件中，单行注释则不会 /* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appe...

vue-h5-template：vue搭建移动端开发，基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装，内置手机端模板脚手架

02-05

基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装，内置手机端模板脚手架掘金：建议手机端查看节点版本要求 Vue CLI需要Node.js 8.9或更高版本（推荐8.11.0+）。您可以使用或在同一台...

最新发布

06-28

cli`，它内部封装了webpack，因此可能需要检查`@vue/cli-service`的版本，因为不同版本的`@vue/cli-service`使用的webpack版本不同。常见对应关系：- `@vue/cli-[email protected]`对应 webpack4- `@vue/cli-[email protected]`...

基于Vue3+TypeScript+ Vue-Cli4.0 ，构建手机端模板脚手架.zip

12-02

vue3-h5-模板基于Vue3+TypeScript+ Vue-Cli4.0 + vant ui + sass+ rem 装备方案+axios封装 + jssdk配置 + vconsole移动端调试，构建手机端模板脚手架项目地址github掘金地址掘金繁體地址繁體查看demo建议手机端查看...

vue-vant-h5-plus:开箱即用vue-cli4 vant rem移动端框架方案

03-29

基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装，内置手机端模板脚手架节点版本要求 Vue CLI需要Node.js 8.9或更高版本（推荐8.11.0+）。您可以使用或在同一台计算机中管理多个Node版本。 ...

vue-cli3设置sass/scss全局变量

u010085702的博客

08-08

1024

1 准备存放全局样式变量的文件 _variable.scss，内容如下： $theme-color: #3385ff; 2 配置loader 打开根目录下 vue.config.js 写入 module.exports = { // ... css: { loaderOptions: { sass: { prependData: ` @import "@/assets/styles/_variable.scss";

vue - 添加sass(less)处理

weixin_34342207的博客

09-10

122

1. 添加less、sass处理 1.1如果是sass，首先在当前目录安装处理插件（sass）： npm i -D node-sass sass-loader 1.2如果是less，首先在当前目录安装处理插件（less） npm i -D node-less less-loader 2.其次打开webpack.base.conf.js 1 {...

Vue3脚手架安装后添加Sass

bestadc的博客

08-22

266

按照官网安装Vue3脚手架后添加Sass

Vue项目中安装及使用Sass（scss）

蓝胖子的博客

04-03

9692

Vue项目中安装及使用Sass（scss）

Vue-cli3.x 如何进行sass操作

weixin_44836296的博客

04-20

6086

创建好vue-cli3.x创建好后；新建一个Vue项目；在该项目中使用sass需要两步；首先；安装sass操作的依赖：安装node-sass 和 sass-loader 1：npm install --save-dev node-sass； 2：npm install --save-dev sass-loader；第二步：.在...

vue-cli3引入sass(.scss)样式管理、sass-resources-loader全局变量

shawxlee的CSDN博客

12-30

4125

style lang = " scss " > /* 标记语言为scss */ div {/* 直接书写变量 */ margin : 0;h1 {/* 使用 @include 引入混合样式 */ padding : 0;< style lang = " scss " > /* 标记语言为scss */ div {/* 直接书写变量 */ margin : 0;h1 {/* 使用 @include 引入混合样式 */ padding : 0;

使用vue-cli初始化一个vue2的项目后，在该项目中引入sass编写css样式的步骤及踩坑

IT攻城狮-五月的博客

05-13

7004

可以看到我的电脑里安装的是14.16.0版本的node.js，这里为什么要看一下？如果踩过坑的小伙伴肯定知道，还没踩过坑的小伙伴查看过node.js的版本以后要记一下版本号，后面会用到。这里 github 上给的安装命令是在你本地进行全局安装，而我们现在使用它的话是在项目的开发阶段进行使用，所以我们要在项目的根目录下运行 DOS 命令在开发环境中安装 sass。执行安装命令成功后，可以在项目的 package.json 文件中的 devDependencies 项中看到新增了相应版本的 sass 依赖

vue-cli项目如何使用sass？

qq_44570971的博客

01-23

1262

一、安装sass 安装 node-sass这个插件，同时安装 sass-loader，在控制台键入命令：npm i --save-dev node-sass sass-loader 安装完成，在 build 文件夹下的webpack.base.conf.js 的rules 里面添加配置{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] } 在需要使用sass/scss的组件中修改style标签：<style lang="scss" s