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 7874
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 197
安装： 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 2152
什么是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 ...
less在vue-cli的使用
weixin_46301474的博客
02-20 227
在vue-cli中构建的项目中使用less可以发现，在package.json并没有less相关的插件，所以需要自行安装。 第一步：安装 npm install less less-loader --save-dev 第二步：在配置文件中配置 *新建一个webpack.dev.conf.js文件，在文件写入以下代码并保存。 module: { rules: utils.styleLoaders(...
在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中配置sass
08-30
本篇文章主要介绍了详解vue-cli中配置sass ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
11-27
本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细...
Vue-cli5 引入less的全局样式
m0_61131022的博客
03-08 564
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 409
新建文件 postcss.config.js, 用于适配h5页面。新建文件 postcss.config.js, 用于适配h5页面。移动端配置: vant2.x + rem布局自适应。
Vue CLI 安装使用 less 和 less-loader
继续学习......
02-11 329
less 基础
vue-cli添加less-loader
weixin_33991418的博客
07-20 1538
vue-cli默认使用的css-loader，多数情况下我们会添加一种预编译语言 下面简单介绍一下添加less-loader 安装vue-cli 移步官网https://cn.vuejs.org/v2/guide... 安装less和less-loader 这里需要安装less和less-loader cnpm i less --save...
deprecated request@2.88.2: request has been deprecated, see https://github.com/req
百晓子木
06-11 4527
@vue/cli 安装出错 我们可以安装淘宝镜像来解决 npm config set registry https://registry.npm.taobao.org 然后重新安装 npm install -g @vue/cli 就能安装成功了 这是我安装得版本，然后创建项目 2020.06.07 22.59
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、付费专栏及课程。

余额充值