vueCli4 安装 sass

最新推荐文章于 2024-04-03 14:42:18 发布
最新推荐文章于 2024-04-03 14:42:18 发布
阅读量545 收藏 8
点赞数 4
分类专栏： 前端 文章标签： vue.js scss sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45295262/article/details/120631178
版权

我之前就知道安装sass要注意版本问题，之前也做了笔记，但是今天安装我忘了我以前的笔记写在哪里了（😂😂😂），安装了几次和换版本也没解决，网上有些说的也不清楚，经过尝试，记录一下，下次安装自己看。

第一种：
直接装这两个就可以了，不需要node-sass也没问题，需要重跑一下项目。

npm install sass@1.26.5 --save-dev
npm install sass-loader@8.0.2 --save-dev

第二种：
用这两个版本

npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1

如果还报错再转一下
npm install style-loader --save-dev //安装style-loader

相关报错信息：
在这里插入图片描述
以上总结来源网上其他博客，个人记录一下，方便以后安装😒😉

前端辣么菜
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
详解vue-cli中配置sass
12-07
一、安装对应依赖node模块： npm install node-sass --save-dev npm install sass-loader --save-dev 二、打开webpack.base.config.js在loaders里面加上 rules: [ { test: /\.vue$/, loader: 'vue-loader', ...
Vue-cli 脚手架安装sass
lsf1192354203的博客
06-21 840
CLI全程是Command-Line Interface，命令行界面，俗称脚手架，可以帮我们快速的创建vue项Vue Cli的使用必须依赖node环境和webpack管理员方式打开cmd进行安装，安装命令： npm i -g @vue/cli 查看版本 C:Windowssystem32>vue -V @vue/cli 4.5.13 二、node-sass安装 vue项目如果没有采用vue-cli方式创建，那么在项目下载之后，需要安装node-sass，不然会报错。安装后再进行编译 npm
Vue CLI4 自动化引入 less 全局变量或 Sass、Stylus
RR_chen的博客
04-24 1257
在 Vue CLI4中：（注意看下版本，3版本不是此配置）若想在组件中使用 less文件中的变量、mixin等，若不全局引入，我们在每个组件中一个个引入，会非常麻烦。如： <style lang="less" scoped>@import '~@/assets/less/imports.less';若想在App.vue 导入，但会出错。设置全局引入(即自动化导入)：使用 webpack 的 style-resources-loader插件可自动化导入less.
Vue项目中 安装及使用Sass（scss）
最新发布
蓝胖子的博客
04-03 1281
Vue项目中 安装及使用Sass（scss）
vue-cli项目如何使用sass？
qq_44570971的博客
01-23 1178
一、安装sass 安装 node-sass这个插件，同时安装 sass-loader，在控制台键入命令：npm i --save-dev node-sass sass-loader 安装完成，在 build 文件夹下的webpack.base.conf.js 的rules 里面添加配置{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] } 在需要使用sass/scss的组件中修改style标签：<style lang="scss" s
使用vue-cli初始化一个vue2的项目后，在该项目中引入sass编写css样式的步骤及踩坑
IT攻城狮-五月的博客
05-13 4522
可以看到我的电脑里安装的是14.16.0版本的node.js，这里为什么要看一下？如果踩过坑的小伙伴肯定知道，还没踩过坑的小伙伴查看过node.js的版本以后要记一下版本号，后面会用到。 这里 github 上给的安装命令是在你本地进行全局安装，而我们现在使用它的话是在项目的开发阶段进行使用，所以我们要在项目的根目录下运行 DOS 命令在开发环境中安装 sass。 执行安装命令成功后，可以在项目的 package.json 文件中的 devDependencies 项中看到新增了相应版本的 sass 依赖
vue-cli中配置sass（转）
a4636666的博客
01-30 308
vue-cli中配置sass 原文链接：https://www.cnblogs.com/rainheader/p/6505366.html 如何配置sass 一、安装对应依赖node模块： npm install node-sass --save-dev npm install sass-loader --save-dev 二、打开webpack...
解决vue cli4升级sass-loader(v8)后报错问题
10-15
主要介绍了解决vue cli4升级sass-loader(v8)后报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解在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 cli webpack中使用sass的方法
08-27
主要介绍了vue cli webpack中使用sass的方法,需要的朋友可以参考下
Vue-cli脚架安装sass
陈小白
04-23 289
第一步，安装sass所需插件node-sass、sass-loder、style-loader、sass-resources-loader npm i node-sass sass-loader style-loader sass-resources-loader --save-dev 2.第二步引入，在页面的style写下标记，告诉webpack这个用scss来编译 ...
vue-cli3：配置全局sass/scss（2022/04/08：additionalData）
smm的博客
04-18 9616
vue-cli3：配置全局sass/scss（2022/04/08：additionalData）
在vue-cli4中安装sass及报错解决方法
mt811的博客
05-27 7832
安装方法：遇到报错三步走 第一步：用淘宝镜像安装resources-loader，vue add多半报错 cnpm install style-resources-loader vue-cli-plugin-style-resources-loader -D第二步：安装node-sass和sass-loader cnpm install node-sass -D cnpm install sass-loader -D第三步：创建vue.config.js配置文件，写入下列代码。 const path
vue-cli4.x安装sass/scss/less方法及全局引用公共scss
前端kk的博客
02-02 436
由于不同的电脑node环境可能版本不一样 所以造成直接使用npm去安装node-sass 和 sass-loader 很容易会造成版本不匹配。如果你已经安装过了 但是报错了的 停掉项目 然后卸载掉node-sass和sass-loader （没有cnpm可以用npm）然后重新安装相匹配的版本：（我这里以我自己的 node版本 v10.16.0为例 v14.17.6也适用）mac的话没有node-sass环境 使用以下版本。安装指定版本 4.1.0。
用vue构建项目笔记4(在vue中使用sass的配置)
风云的博客
07-15 1529
在vue中使用scss
vue-cli4安装sass
coderYJ的博客
02-23 967
vue-cli4安装scss 技术交流QQ群1093476453 1.安装依赖包 npm install node-sass --save-dev npm install sass-loader --save-dev 2.vue.config.js配置文件中配置css module.exports = { css: { loaderOptions: { sass: { additionalData:`@import "./src/assets/scss.
vue-cli4 的项目使用sass全局变量的流程。
m0_54991820的博客
11-22 1118
1.我们想要使用sass的全局变量，例如： // _variable.scss文件 $blue: #fff; // about.vue <style scoped> @import '@/src/assets/scss/_variable.scss' // 引入有变量的文件 此时就可以直接使用： div{ background-color: $blue; } </style> 但是在每一个需要使用全局变量的vue文件中都要引入，显然是效率不高的，于是我们做成全局变量，
vue-cli 4.x 中使用 sass 的一些坑
sinat_33255495的博客
01-11 1765
原来用的少不知道，最近新搭建的项目，使用了各种版本的 vue ,每次导入 sass 都会出现问题，也是让我醉了。 这一次是因为公司使用了 vue/cli 4.x 搭建的项目，我安装 sass 以后因为配置的问题让我的项目死活起不来，在网上找了各种改善方法都无效。最终让我试出来了，简直太不容易了，希望在网上发帖的伙伴们遇到问题一定要把查到的方法试过以后发现真的有用再转发，不要对其他人造成误导啊。都是学习工，不容易啊，搜到的每一篇帖子都是精华才好。 报错信息 看到这种报错第一反应肯定是配置的问题，我搜到的错误配
在vuecli4中使用sass
weixin_50821119的博客
06-27 564
1下载依赖，安装包 npm i sass-loader node-sass --save 2注意版本 3配置文件 根目录下 vue.config.js文件中 module.exports = { css: { loaderOptions: { sass: { prependData: `@import "./src/styles/index";`, }, }, .
Vue CLI 5安装sass
05-26
要在Vue CLI 5中使用Sass，你需要安装sass-loader和node-sass。你可以使用以下命令进行安装： ``` npm install sass-loader node-sass --save-dev ``` 安装完成后，Vue CLI 5会自动识别和编译Sass文件。你可以在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值