vue项目安装sass

最新推荐文章于 2024-03-20 08:48:34 发布
最新推荐文章于 2024-03-20 08:48:34 发布
阅读量778 收藏 2
点赞数
分类专栏： 前端 vue 文章标签： vue css sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41723305/article/details/113915723
版权
前端 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
vue
10 篇文章 0 订阅
订阅专栏

npm安装sass

cnpm install node-sass --save-dev       //安装node-sass
cnpm install sass-loader --save-dev     //安装依赖包sass-loader
cnpm install style-loader --save-dev    //安装style-loader

安装完依赖后需要去到bulid目录下的webpack.base.conf.js文件里的module 的rules下添加

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

然后npm run dev启动项目就可以愉快的使用了

常见问题
在npm run dev后报错

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

这个是因为sass-loader版本过高不兼容造成的，只需要我们降低sass-loader的版本就可以了

cnpm uninstall sass-loader // 卸载当前版本
cnpm install sass-loader@7.3.1 --save-dev  //安装指定版本
小白搬运
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中引入Sass实例方法
12-09
首先在项目文件夹执行命令 npm install vue-cli -g，安装vue-cli脚手架，若是已经安装了，则不必再次安装，直接 跳过这一步。接下来执行命令行vue init webpack mypro（注：mypro是项目名）。 接下来安装Sass依赖包...
Vue sass-loader安装
weixin_51299408的博客
10-25 4268
1，安装sass的依赖包 npm install --save-dev sass-loader 如果出错，因为sass-loader版本过高导致，可将版本改为7.3.1，然后再重新安装，若是还过高，则重装6.xcnpm i sass-loader@6.x --save-dev 2，安装node-sass (sass-loader依赖于node-sass) npm install --save-dev node-sass 3，先在根目录下创建webpack.base.conf.js文件，再做..
vue项目中安装sass方法
热门推荐
Y_soybean_milk的博客
05-04 1万+
1、安装sass-loader npm install sass-loader --save-dev 2、安装dart-sass npm install sass --save-dev 你也可以合并步骤1、2为 npm i sass sass-loader -D 注意：你也可以选择安装node-sass，来替换dart-sass,但非常不建议！ 1、dart-sass 和 node-sass都是用来将sass编译成css的工具。但node-sass 与 Node.js 版本相关联，这就导致，一旦本地
Vue 安装 CSS 预处理器（Less、Sass，前端面试复习重点
最新发布
m0_60707606的博客
03-20 301
Sass和Less语法严谨，Stylus相对自由。因为Less长得更像css，所以它可能学习起来更容易。Sass和Stylus条件循环等，而Less需要通过When等关键词模拟这些功能，这方面Less比不上Sass和Stylus。Less在丰富性以及特色上都不及Sass和Stylus，若不是因为Bootstrap引入了Less，可能它不会像现在这样被广泛应用。Less环境较Sass简单。相对而言，国内前端团队使用Less会略多于Sass。从功能出发，Sass较Less略强大一些。Sass。
vue项目使用Sass（scss）
weixin_43697548的博客
04-25 8171
vue项目使用Sass（scss）
Vue 安装 scss (安装步骤/项目使用/报错解决)
nanfangxinchai的博客
08-01 7568
1.1.1.记点：sass-loader：把 sass编译成css, node-sass：nodejs环境中将sass转css。1.1.安装sass-loader/node-sass(前者依赖于后者)
vue 安装 scss
金乌的博客
09-22 1万+
node-sass与 node 版本不兼容时，如果node版本过高时，最好对node版本进行降级，升级node-sass可能有隐藏风险；如果sass版本过高，可以卸载sass，重新安装指定版本。安装scss (安装sass-loader node-sass 前者依赖于后者)node-sass：nodejs环境中将sass转css。安装指定版本：当由于版本过高报错时，可以指定要安装的版本。sass-loader：把 sass编译成css。安装速度很慢时，可以尝试镜像安装。
vue的路由实现及sass讲解
yhwl66的博客
05-10 678
利用onhashchange事件监听hash值的变化通过对应的routes规则里面对应的compoent内容来渲染//解构获取里面的el和对应的router let {
使用vue-cli初始化一个vue2的项目后，在该项目中引入sass编写css样式的步骤及踩坑
IT攻城狮-五月的博客
05-13 4394
可以看到我的电脑里安装的是14.16.0版本的node.js，这里为什么要看一下？如果踩过坑的小伙伴肯定知道，还没踩过坑的小伙伴查看过node.js的版本以后要记一下版本号，后面会用到。 这里 github 上给的安装命令是在你本地进行全局安装，而我们现在使用它的话是在项目的开发阶段进行使用，所以我们要在项目的根目录下运行 DOS 命令在开发环境中安装 sass。 执行安装命令成功后，可以在项目的 package.json 文件中的 devDependencies 项中看到新增了相应版本的 sass 依赖
在vue项目中使用sass语法问题
01-21
Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由...首先，我们创建完vue项目之后 尝试在项目中使用sass语法 运行后发现果不其然报错了 在使用scss之前，我们首先需要安装相关的插件 npm insta
在vue项目中使用sass的配置方法
08-27
主要介绍了在vue项目中使用sass的配置方法,需要的朋友可以参考下
详解在vue-cli项目中安装node-sass
12-01
1，使用save会在package.json中自动添加。 npm install node-sass --save npm install sass-loader --save 2，通常使用npm安装会出现以下报错，安装...cnpm install node-sass --save （使用淘宝镜像安装node-sass）
vue项目中使用scss
weixin_45665171的博客
03-29 1万+
vue项目中安装、引入、使用scss
vue使用sass以及如何选择版本
weixin_43193877的博客
12-29 1万+
vue使用sass以及如何选择版本 在vue项目开发过程中，难免要使用到像sass或less这样对于css的脚本语言 但是对于新手来说，如何使用却犯了难题，安装各种后各种报错等… 接下来帮你缕清思路 前言：vue中欲想使用sass，需要依托于node-sass运行，也就是说sass不能在vue中直接使用，需要借助node-sass来运行(tips：node-sass的运行环境是node)，所以说需要下载sass-loader和node-sass两个包 npm install --save-dev sas
vue中安装sass
weixin_44302838的博客
07-13 1021
安装了几次，发现很坑的地方安装必须@版本号不然不行 npm install sass-loader@7.3.1 --save-dev //安装sass-loader npm install node-sass@4.14.1 //安装node-loader npm install style-loader --save-dev //安装style-loader这个可以不用@ 然后再vue.config.js中写 css: { loaderOpt
vue项目安装scss
qq_41444226的博客
03-17 9802
命令 npm i sass-loader@7.3.1 -D npm i node-sass@4.14.1 -D node和scss版本依赖关系
vue2 sass 安装及使用
lsswear的专栏
11-19 9565
vue-cli sass
sass安装步骤、概述、基本语法等
m0_46170663的博客
11-01 7482
上面我们学习到，变量可以保存css的值，但是我们不可以直接使用变量名作为选择器的名字，如果想要在CSS中使用SASS变量，就需要用#{ }包裹变量名，才可以使用，否则会报错。比如企业需要设置主题色，比如京东红，假设改版时需要将企业色更换，这时只需要改一个颜色的变量值就可以改掉全局的颜色，无需大量更改了。注意：虽然sass提供了变量计算的功能，但是由于系统I/O调用顺序，导致有的电脑可以快速计算并编译，有的报错或者直接不编译。9. 编译的过程受电脑性能的影响，有的电脑编译的比较快，有的慢，这个很正常。
vue scss 安装步骤
活捉一只小可爱
07-12 2012
vue sacc 安装步骤
vue项目安装sass后,在项目中使用报错
01-24
在Vue项目中安装sass后，出现报错可能是由于一些常见的问题导致的。首先，需要确保在项目中正确安装了sass-loader和node-sass依赖，可以使用以下命令进行安装： ``` npm install sass-loader node-sass --save-dev ``` 安装完成后，需要在项目的webpack配置文件中正确配置sass-loader，以确保正确加载sass文件。在webpack配置文件中，需要添加类似以下的配置： ``` module: { rules: [ { test: /\.s[ac]ss$/i, use: [ // ... 'sass-loader', ], }, ], } ``` 另外，还需要确保项目中正确引入了sass文件，在Vue组件中引入sass文件的方式通常是使用`<style>`标签并添加`lang="scss"`属性。例如： ```html <style lang="scss"> // Your scss code here </style> ``` 当这些配置都正确完成后，应该能够在项目中正常使用sass文件，并且不再出现报错。如果报错仍未解决，可以尝试重新安装依赖、清除缓存或查看项目的日志，以便进一步分析和解决问题。希望以上方法能够帮助解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值