Vue项目使用sass及注意事项

最新推荐文章于 2023-05-25 11:24:23 发布
最新推荐文章于 2023-05-25 11:24:23 发布
阅读量281 收藏
点赞数 2
分类专栏： Webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44116302/article/details/102546542
版权

Vue项目使用sass及注意事项

如何使用

npm镜像替换

npm镜像替换步骤

安装sass

cnpm i -D sass-loader node-sass

配置sass

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
	test: /\.scss$/,
	loaders: ['style', 'css', 'sass']
}

使用sass

vue文件所在的style样式标签上添加lang="scss"即可使用

注意事项

Module build failed: TypeError: this.getResolve is not a function（sass版本过高问题）

解决方法：当为webpack3时在package.json文件设置node-sass版本设置为"^4.7.2"， sass-loader版本设置为"^6.0.7"，重新下载依赖cnpm i,执行npm run start

UnhandledPromiseRejectionWarning: CssSyntaxError

解决方法：scss文件css注释使用多行注释（/**/），不要使用单行注释（//）

定栓
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue 项目 使用sass
h5css3_linhuai的博客
06-06 1414
1、安装并在package.json中添加       npm install node-sass --save-dev       npm install sass-loader --save-dev 2、进入webpack.base.config.js 配置scss      找到 module -- loaders (vue2.0) module: { rules:
VUE项目中使用SASS
Love_yl的专栏
02-02 232
1.安装sass包：node-sass sass-loader style-loader npm i node-sass sass-loader style-loader -D 2. 创建scss文件 在src/assets/css/common.scss文件 $red:red; //定义一个红色 3.在vue组件中使用scss HelloWorld.vue中 <stylescopedlang="scss"type="text/css"> @...
webpack sass 单行注释报错
just_a_code_man的博客
12-14 1671
webpack中sass使用单行注释报错问题
vue项目中如何使用sass
sally18的博客
08-23 4618
一，安装 1) 使用淘宝镜像安装 cnpm i sass-loader@7.3.1--save-dev cnpm i node-sass@4.14.1--save-dev 2) 找到build文件夹，在文件夹里面的 webpack.base.conf.js 文件下修改配置： 在module下的rules里天添加配置： 3）.vue 文件中使用 二，sass用法指南 ...
vue2.0项目中使用sass(含sass基础用法示例)
热门推荐
李大人的博客
02-21 5万+
Sass是一种CSS扩展语言，目前广泛地应用到web项目开发中，使用sass可以用更少的代码去实现CSS同样的样式效果，在书写上也更为简洁，其原理是通过一定的规则转化为对应的CSS样式，可以说是样式中的“高级语言”。Sass在日常的开发中，是需要通过转换工具转成CSS再引入到HTML文件中，然而，在vue的webpack项目模板中，引入解释sass文件的loader，即可使用sass。本文将展示v...
vue项目使用Sass（scss）
weixin_43697548的博客
04-25 8497
vue项目使用Sass（scss）
vue项目中使用scss
weixin_45665171的博客
03-29 1万+
vue项目中安装、引入、使用scss
vue-cli3.0配置及使用注意事项详解
10-18
在使用Vue-cli3.0创建项目时，系统提供了默认预设配置和用户自定义配置。用户在自定义配置完成后，系统会询问是否保存当前配置作为未来项目的预设值，这样用户在创建新项目时无需重新配置，提高了开发效率。 2. ...
浅谈sass在vue注意的地方
12-09
在Vue.js项目中，Sass（Syntactically Awesome ...总之，正确理解和处理Vue与Sass的结合使用，能有效提升项目的可维护性和代码质量。了解并掌握这些注意事项，将有助于你在开发过程中避免常见的困扰，提高开发效率。
vue-cli4.x环境搭建
01-08
5. **其他注意事项** - 如果在使用过程中遇到问题，确保所有依赖都是最新且兼容的，及时更新 Vue CLI 和其相关插件。 - 安装时网络问题可能导致下载失败，可以尝试使用国内的 NPM 镜像源提高下载速度。 - 项目...
vue项目中使用scss的方法步骤
10-16
主要介绍了vue项目中使用scss的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vite-sass-alias-bug
03-25
vite-sass-alias-bug 当vite加载带有别名的嵌套sass（不是scss）文件时，如果该文件具有@import，则sass编译器将引发错误。 但是，它在不使用别名时有效。 与从节点模块使用@import加载sass相同。 要重现，只需打开sass.sass文件，然后取消注释每种情况。 然后运行npm start
vue中rem的配置的方法示例
10-18
在Vue.js中，为了实现移动端的自适应布局，...通过以上步骤和注意事项，你可以在Vue项目中成功配置并使用`rem`单位，实现响应式布局。记得在开发过程中不断测试，确保在不同设备和浏览器上都能呈现出良好的视觉效果。
vue.js添加待办事项样式特效源码.zip
11-20
首先，我们需要解压文件，会发现一个名为"使用须知.txt"的文档，它可能包含了项目运行的说明和注意事项。通常，这样的文档会指导你如何安装依赖、启动开发服务器以及项目的特定配置。 另一个文件...
vue项目使用scss/sass
Jone's Area
07-02 655
Study 基本用法：scss/sass基操 1、安装 npminstall sass-loader --save-dev npm install node-sass --sava-dev 2、单页面使用 <style lang="scss" > .pageBody{ width:100%; } </style> 3、全局引用 npminstall sass-resources-loader --save-dev 删除buil..
Vite+Vue项目添加sass预处理器
qq_54334713的博客
08-06 8540
vite+vue配置sass
Vue+Sass实现动态换肤
u598975767的专栏
01-03 4996
言明，本文实现的动态换肤并非elementUi官网那种随意用ColorPicker实时更改主题的效果，而是为系统预设的几种主题事先配置颜色，然后线上触发更改主题的事件。 首先感谢luanxiyuan老师的博文引导。 此方案涉及Sass的map遍历、函数定义、map存取、混合器等相关知识，具体API详参官网https://www.sass.hk/docs/。 大概的思路就是给html根标签设置...
使用Sass在Vue 3 + Vite项目中实现样式编写与全局抽取
qq_43326668的博客
05-25 4187
同时，还提供了如何将Sass样式抽取到全局并使用的方法，以及全局Sass代码的常用技巧。在Vue 3 + Vite项目中，使用Sass预处理器可以极大地提升样式编写的效率和可维护性。本篇博客将介绍如何在Vue 3 + Vite项目中使用Sass语法编写样式，以及如何将Sass样式抽取到全局中。在上述配置中，我们通过css.preprocessorOptions.scss.additionalData来引入一个全局的Sass文件，可以在这个文件中定义一些全局的变量和混合器。首先，确保已经安装了相关的依赖。
vite vue3项目使用sass
最新发布
09-22
在Vite Vue3项目中使用Sass，可以通过以下几个步骤来配置： 1. 首先，在项目的根目录下，通过命令行安装sass依赖： ``` npm install sass --save-dev ``` 2. 然后，在Vite的配置文件`vite.config.js`中，添加对sass文件的支持。可以使用`vite-plugin-style-import`插件来实现： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import styleImport from 'vite-plugin-style-import' export default defineConfig({ plugins: [ vue(), styleImport({ libs: [{ libraryName: 'sass', esModule: true, resolveStyle: (name) => { return `@import '${name}';` } }] }) ] }) ``` 3. 最后，在需要使用Sass的组件中，可以直接在样式中使用Sass语法编写样式了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

定栓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值