Vue 中使用 Sass 踩的坑

最新推荐文章于 2024-04-03 14:42:18 发布
最新推荐文章于 2024-04-03 14:42:18 发布
阅读量383 收藏 1
点赞数
分类专栏： HTML及CSS 文章标签： vue css Sass npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44888570/article/details/113849056
版权

这两天在vue脚手架中使用Sass，踩了几个坑，分享出来。

在 Vue cli3 中安装
$ npm i sass sass-loader -D
  • 首先，要安装的是两个，sass sass-loader
  • 其次，一定要安装在开发依赖中，因为它是CSS的预处理器。-D即为--save -dev的缩写，这是第一个坑
  • 然后，你可以能会出现以下两个问题
    • Sass中的独特语法，如嵌套写法，不生效
    • 甚至你连编译都过不去，项目起不来，报错
  • 那么解决方法呢？其实大概率是因为你的sass-loader的版本过高，降低版本即可
    • 可以package.json中修改为"sass-loader": "^7.3.1"
    • 或者直接卸载重装$ npm i sass-loader@7.3.1 -D
更新

2021/3/24
在vue3中使用sass，要安装node-sass，sass-loader。后者目前笔者所知的可使用版本为"sass-loader": "^10.1.1"，前者似乎对版本要求不高。

结语

如果对你有帮助的话，请点一个赞吧

zeddme
关注
专栏目录
Vue 使用 Sass
zmd.
11-27 217
【 Vue 使用 sass 】 npm install sass-loader node-sass --save-dev 在webpack.bse.config.js中rules加入 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } 如果有一个全局的样式不想每一个组件里面都定义,只想在公共的publice.scss里面定义然后全局可用我们可以做如下配置 npm install style-loader --save-dev cnpm
vue使用sass
weixin_44156500的博客
04-30 177
因老板不经意简的需求 说看了某某网站看别人的换肤挺好的 咱也做一个。。。。。 1.需安装 node-sass sass-loader style-loader sass-resources-loader 2、需修改build里面util.js ../src/assets/global.scss 路径为相对路径 你的scss路径 scss: generateLoaders('sass')...
Vue中使用Sass
轻风细雨_林木木
10-16 4330
1.安装和使用： // 安装sass-loader node-sass 前者依赖于后者 npm install sass-loader --save-dev npm install node-sass --sava-dev 2.卸载 // 卸载当前版本sass-loader命令： npm uninstall sass-loader 3.安装指定版本： // 安装低版本的sass-loader...
vue中使用sass
小羽向前跑
05-30 2746
先安装 npm install node-sass --save-dev npm install node-sass --save-dev npm install style-loader --save-dev 如果npm安装报错，就安装cnpm 配置loader 在项目中的build目录找到webpack.base.conf.js文件，在该文件module.export中的mo...
详解如何在vue中使用sass
08-30
vue中使用sass详解 在本篇文章中，我们将详细介绍如何在Vue项目中使用sass，从安装sass依赖包到配置sass语法，最后实现使用sass编写样式文件。以下是我们将要涵盖的知识点： 1. 安装sass依赖包 在使用sass之前，...
vue2中使用sass并配置全局的sass样式变量的方法
12-01
Sass语言  Sass是一种强大的css扩展语言（css本身并不是一门语言），它允许你使用变量、嵌套规则、mixins、...在vue中，我们可以使用<style lang="scss"></style>来标志里面的内容是以SCSS语法来书写的
vue cli webpack中使用sass的方法
08-27
Vue CLI Webpack 中使用 SASS 的方法 在 Vue CLI 项目中使用 SASS 需要安装相应的依赖项和配置loader，下面将详细介绍 Vue CLI Webpack 中使用 SASS 的方法。 安装依赖 首先，需要安装 SASS 相关的依赖项，使用 ...
在vue项目中使用sass语法问题
10-16
在Vue项目中使用Sass语法是前端开发中的一个重要话题，尤其对于希望提高CSS组织性和复用性的开发者来说。Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，它扩展了CSS的功能，支持变量、嵌套规则、...
Vue中使用sass实现换肤功能
10-18
总的来说，Vue中使用Sass实现换肤功能主要是通过定义变量、创建可复用的mixin以及利用HTML的自定义属性来实现的。这种方式不仅使得样式代码更易维护，也提供了更好的用户体验，因为用户可以在不影响页面其他部分的...
vue项目中使用sass
lgrrrr的博客
02-25 315
1、在使用scss之前，我们首先需要安装sass的依赖包： npm install node-sass --save-dev npm install sass-loader --save-dev (在这里第一个命令可能会安装失败，不用担心，执行以下命令) 解决 $ npm install node-sass --save-dev 失败的问题 npm install --save node-sass...
Vue项目下使用Sass
lyqhn2012的专栏
12-22 794
优势Sass是CSS预编译器，使CSS编写简单，容易维护，从而大大节省开发时间。Sass目前全面兼容CSS 环境node v8.9.1 npm v5.6.0 Vue.js v2.x webpack v3.10.0' 安装sass的依赖包$ npm install --save-dev sass-loader$ npm install --save-dev node-sassnpm install -
VUE项目中使用SASS
Love_yl的专栏
02-02 260
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"> @...
vue2.0项目中使用sass(含sass基础用法示例)
热门推荐
李大人的博客
02-21 5万+
Sass是一种CSS扩展语言，目前广泛地应用到web项目开发中，使用sass可以用更少的代码去实现CSS同样的样式效果，在书写上也更为简洁，其原理是通过一定的规则转化为对应的CSS样式，可以说是样式中的“高级语言”。Sass在日常的开发中，是需要通过转换工具转成CSS再引入到HTML文件中，然而，在vue的webpack项目模板中，引入解释sass文件的loader，即可使用sass。本文将展示v...
vue中使用sass的过程
weixin_38411737的博客
04-11 115
安装 npm install --save-dev sass-loader npm install --save-dev node-sass@7.3.1 <!--就可以使用了--> <style scoped lang="scss"></style> 重点：node-sass 版本一定要是7.3.1，不然安装之后会，使用的时候会报错 ...
Vue项目中 安装及使用Sass（scss）
最新发布
蓝胖子的博客
04-03 4263
Vue项目中 安装及使用Sass（scss）
VUE中如何使用sass
weixin_44020340的博客
03-16 316
VUE中如何使用sass 首先需要下载 npm install node-sass --save-dev 这样下载应该是下载最新的版本，可能会有些不兼容 npm install style-loader --save-dev npm install sass-loader --save-dev 当出现下面的情况的时候就是版本不兼容了 这时候我们要先把不兼容的先卸载 npm uninstall node-sass 卸载这个 npm install node-sass@4.14.1 安装可以兼容
vue3使用sass
08-30
在Vue 3中使用Sass（Syntactically Awesome Style Sheets）可以通过以下步骤来完成： 1. 首先，确保您的项目已经安装了Sass依赖。您可以使用npm或yarn来安装它们。 ```bash npm install sass --save-dev ``` 或者 ```bash yarn add sass --dev ``` 2. 在您的Vue项目中创建一个样式文件，例如`styles.scss`。您可以将此文件放置在任何您喜欢的位置。 3. 在`styles.scss`中，您可以编写Sass代码，例如： ```scss $primary-color: #ff0000; .button { background-color: $primary-color; color: white; } ``` 4. 在您的Vue组件中引入样式文件。您可以在组件的`<style>`标签中使用`@import`指令来引入Sass文件，如下所示： ```vue <style lang="scss"> @import "@/path/to/styles.scss"; /* 其他样式代码 */ </style> ``` 确保将`@/path/to/styles.scss`替换为您的实际文件路径。 5. 现在，您可以在Vue组件中使用Sass定义的变量和样式类。例如，您可以在模板中的元素上使用`.button`类，它将应用Sass中定义的样式。 这样，您就可以在Vue 3项目中使用Sass了。请记住，在使用Sass之前，您可能需要配置构建工具（如webpack或vite）以正确处理Sass文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值