sass 和 less 在 @vue/cli中的使用方法及问题

最新推荐文章于 2023-03-24 16:56:27 发布
最新推荐文章于 2023-03-24 16:56:27 发布
阅读量402 收藏
点赞数
分类专栏： vue-cli 前端基础 文章标签： css less sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41934908/article/details/106867026
版权

less

  • 只需要安装 less-loader
  • 在 vue 组件中使用的时候像下面这样

在这里插入图片描述
需要注意的是这个头

在这里插入图片描述

当然你可以直接输入 less 脚手架会提示，直接 enter 就行，然后直接根据less 语法去写样式就 ok

sass

  • 首先也是像 less 一样去安装 loader
	npm i sass-loader
  • 然后在 vue 文件中写，像下面这样

因为你习惯性的输入 sass 后会有提示，然后就会习惯性的 enter

在这里插入图片描述

  • 写好了 sass，然后启动项目在这里插入图片描述

报错找不到模块 node-sass

  • 然后我们去安装
npm i node-sass
  • 安装 ok 之后启动项目

又报错了

在这里插入图片描述

这就是习惯性的错误

  • 还记得上面的习惯性 enter 吗

在这里插入图片描述
上面直接enter 的结果，报错，然后我们改一下 lang

在这里插入图片描述

再去运行，ok，项目能正确运行了，sass 就使用了，后面用sass 语法直接写样式

2020 06 20 06 00

靳公子
关注
专栏目录
vue-cli4更新历程
禅思院
10-17 7875
4.0.1 (2019-10-16) ???? Bug Fix @vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex, @vue/cli-service-global, @vue/cli-ui-addon-webpack, @vue/cli-ui-addon-widgets, @vue/cli-ui, @vue/cli...
vue 从入门到精通之【@vue/cli】(三)
qq_36812154的博客
01-02 198
安装： npmi@vue/cli-g 基于脚手架创建 vue 项目： 选中 vue 版本 自定义一些配置项 vuecreatexxx //项目需要符合npm包规范（数字和小写字母） 项目目录： 特殊：一般来讲，public/index.html 页面模板中不会编写啥内容，一般都是基于 webpack 把各组件（各页面）的内容合并编译后，插入到 index.html 的#app 的容器中。 但是部分需求还需要在这个页面中写： 我们后期可以基于 vue3...
vue-cli如何添加less 以及sass
12-01
vue-cli中已经内置配置好了sass 以及lass的配置。如果需要的话直接下载两个模块就可以了 npm install node-sass --save-dev npm install sass-loader --save-dev 如果是淘宝镜像直接运行cnpm是一样的效果 然后在组件或者视图中给样式加上语言就可以了 <style lang="sass" scoped> ..... </style> 这里需要说明一下scoped是让样式只在当前组件或者视图中起作用的。 less的话也是一样 需要装两个loader npm install less --save-dev npm i
vue-cli 添加less 以及sass
weixin_33712987的博客
02-26 114
vue-cli中已经内置配置好了sass 以及lass的配置。如果需要的话直接下载两个模块就可以了 npm install node-sass --save-dev npm install sass-loader --save-dev 如果是淘宝镜像直接运行cnpm是一样的效果 然后在组件或者视图中给样式加上语言就可以了 <st...
在vue中使用sass、less、stylus的配置方法
Raytheon的博客
10-10 742
1、创建一个基于 webpack 模板的新项目 vue init webpack myvue 2、在当前目录下，安装依赖 cd myvue npm install 3、安装css预编译的依赖包 //sass npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node...
vue-cli中使用sass或者less
SnowBeatRain的博客
05-24 2154
什么是sass、less？他们有什么区别？请移步官网！这里仅仅记录一下如何使用开门见山。sass    创建好vue脚手架后，打开命令行安装sass:脚手架虽然有配置sass，配置在build/utils.js，但对应的loader未安装 ,请执行以下命令：npm install --save-dev node-sass npm install --save-dev sass-loader在这里需...
vue中对sass的安装
m0_47958800的博客
06-27 275
https://blog.csdn.net/zhouzuoluo/article/details/81010331 注意： 安装时先安装 cnpm install node-sass --save-dev; 再安装 cnpm install sass-loader --save-dev 否则会报错peerDependencies WARNING sass-loader@* requires a peer of node-sass@^4.0.0 but none was installed ...
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
11-19
在Vue CLI 3.0中，使用预处理器如Sass、Less或Stylus来配置全局变量是一项常见的任务，这可以提升CSS代码的可维护性和复用性。Vue CLI在项目初始化时允许你选择预处理器，但即使未选择，内部的webpack配置也能处理...
vue-cli配置全局sass、less变量的方法
10-16
Vue CLI 提供了方便的方式来配置全局的 Sass 或 Less 变量，使得这些变量可以在整个项目中被共享和重用。下面将详细介绍如何配置。 ### 配置全局 Less 变量 1. **下载插件**： 使用 Vue CLI 3 的命令行工具，你...
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
11-27
本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细...
详解vue-cli中配置sass
08-30
本篇文章主要介绍了详解vue-cli中配置sass ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue-cli5 引入less的全局样式
m0_61131022的博客
03-08 567
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
vue-cli 安装less运行报错
guoshuhua1的博客
08-16 218
md太气了，一运行就报错，这个搞了我快一晚上。 就是这个错误 原因： 出现这个问题的原因是less-loader版本过高，降级到5.0.0即可 重新npminstallless-loader@5.0.0--save-dev 即可
vue-cli 中如何使用less
Sissi的个人笔记
07-17 801
第一步 因为vue-cli中是不支持less的，所以要使用的话需要自己安装less和less-loader，命令如下 npm install less less-loader --sava-dev 第二步 打开build/webpack.base.conf.js，在module.exports 对象中添加依赖 module.exports = { module: { ...
升级vue-cli5.0+vant+less, h5移动端升级踩坑记录
最新发布
weixin_44999420的博客
03-24 411
新建文件 postcss.config.js, 用于适配h5页面。新建文件 postcss.config.js, 用于适配h5页面。移动端配置: vant2.x + rem布局自适应。
Vue CLI 安装使用 less 和 less-loader
继续学习......
02-11 334
less 基础
vue-cli添加less-loader
weixin_33991418的博客
07-20 1539
vue-cli默认使用的css-loader，多数情况下我们会添加一种预编译语言 下面简单介绍一下添加less-loader 安装vue-cli 移步官网https://cn.vuejs.org/v2/guide... 安装less和less-loader 这里需要安装less和less-loader cnpm i less --save...
vue项目中使用sass、less
weixin_40856652的博客
04-19 1074
一、安装 在命令行中进入项目的根目录下执行：npm isntall node-sass sass-loader --save-dev就能给项目安装 node-sass和sass-loader 但可能会存在版本问题，可以通过固定安装版本来解决： cnpm install node-sass@4.13.0 sass-loader@8.0.0 --save-dev 二、使用 在页面或者组件的style标签上添加lang="scss"即可使用sass 三、Vue中使用sass 的全局变量和 @mi
less和sass的用法
m0_60342598的博客
08-15 2275
less与sass分别是什么 1、less Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，它可以运行在 Node 或浏览器端。 2、sass Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套 、混合 、导入 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。 less和sass的
Vue-cli中详述jQuery、Bootstrap及Sass/Less CSS集成教程
你可以根据需要在项目中引入相应的loader（如`sass-loader`和`less-loader`），并在`.vue`文件或单独的CSS文件中使用Sass或Less语法，然后通过Webpack构建工具编译成CSS文件。 总结来说，这篇文章详细介绍了如何在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值