安装scss需注意

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

1、先看自己node版本号   再找对应的node-sass\sass-loader版本号

D:\testProject\vueTwo> node -v

v14.17.3

2、根据node版本号查找对应的node-sass版本

 例如  我的node版本号为14.17.3，那对应的node-sass版本为4.14以上的版本，进行安装

D:\testProject\vueTwo> npm install node-sass@4.14.1 -D

 3、安装sass-loader，这个对应的版本号大家可以上网搜一下，我这边对应的是7.3.1（大家可以用node-sass版本为4.14.1的版本找对应的sass-loader版本）

D:\testProject\vueTwo> npm install sass-loader@7.3.1 -D

4、安装完成，重启项目即可 

易鹤鹤.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
scss安装入门到使用高级语法
weixin_37818738的博客
07-31 7807
Sass是CSS的"预处理器",它在CSS的语法基础上增加了变量,嵌套,计算,函数,等用法,让CSS的编写更简洁,清晰. 预处理器出了Sass 还有其他,常见的有Less,Stylus,使用方法也类似......
vue项目中安装scss
weixin_47093260的博客
06-02 5872
vue项目安装scss 安装 npm install sass-loader node-sass --save-dev 2.配置 在build文件夹下的webpack.base.conf.js的rules里面添加如下代码: 3.在.vue问文件中使用scss 警告!!! 如果你使用scss时终端报错: 这个错误其实是:sass-loader版本过高导致编译错误 解决: 将sass-loader版本调至7.3.1 npm uninstall sass-loader npm install s
uni-app中使用scss的示例代码
12-14
遇到的坑 整个一个下午我都在解决uni-app中使用scss的坑，首先说一下我的问题，在用scss时一直不能使用@mixin，然后百度各种办法调试： 代码写法问题（完全按官网的写法来的不可行）: 官网demo 浏览器问题（换火狐不行）。 语法版本问题（换了写法同样不行）: scss使用mixin不生效，浏览器无法编译出来 插件没有安装上（重装还是不好使）。 把<style type=’css’> 改成了 scss ， 还是不行。 使用scss新语法还时不行 整个一下午实在是弄不出来，没办法的情况下，想着直接用vue的中安装scss的方法来操作一下试试，结果还真可以了。 需要注意的是不能全局
vue2配置scss的方法步骤
01-19
1、安装文件 npm install --save-dev sass-loader npm install --save-dev node-sass 2、配置 webpack.base.conf.js 找到webpack.base.conf.js文件的module模块下面的rules添加以下代码 ... { test: /\.scss$/, loaders: [style, css, sass] }, ... 注意：这里loaders和文件中其他配置不同加了s 3、使用 1、在使用的地方如下写法 <style lang=scss scoped> div
Vue项目中 安装及使用Sass（scss）
最新发布
蓝胖子的博客
04-03 1494
Vue项目中 安装及使用Sass（scss）
sass(scss）的安装与使用教程
01-19
CSS预编译器有 SASS LESS Stylus等等，SCSS是SASS3引入的新语法。那为什么要选择SCSS呢？那我只能说我喜欢啊！不管SASS也好，LESS也罢，还是Stylus都只是一种工具，各有各的优缺点，选择自己喜欢的用着舒服的就是了。没必要纠结这么多。 准备工作（注意：这是windows平台下的安装） Ruby SASS 1.1 安装　　 SASS是Ruby语言写的，但是两者的语法没有关系。所以不懂Ruby，一样可以使用。只是必须先安装Ruby，然后再安装SASS。 　　根据自己系统的位数（64 OR 32）选择合适的安装包，下载安装包之后双击打开，一路下一步，完
webpack4 SCSS提取和懒加载的示例
12-12
本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是，v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。 >>> 本节课源码 >>> 所有课程源码 1. 准备工作 关于 SCSS 处理的基础，请参考webpack4 处理 SCSS。 本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。 下图展示了这次的目录代码结构： 为了实现 SCSS 懒加载，我们使用了extract-text-webpack-plugin插件。 需要注意，在安装插件的时候，应该安装针对v4版本的extract-text-webpack-plugin。npm 运行如下命令：npm i
在vite初始化的项目中安装scss，及scss的使用
2301_77415960的博客
11-25 1483
在vite初始化的项目中安装scss，及scss的使用
css学习之路：sass学习基础篇
Code_King006的博客
01-04 1083
混合器使用最多的场景，是css hack （针对低版本的浏览器做兼容）所以scs是有时候分不清楚，我们写的-是减法还是变量的一部分。scss中预定义了很多函数，有些函数甚至可以在CSS中使用。把多个选择器都会使用的一部分样式封装起来，只写一遍。红色与红色计算，绿色与绿色计算，蓝色与蓝色计算。不带双引号+带双引号=不带双引号的字符串。在scss中，/号的作用，是除法和分隔符。scss中的运算会自动的转换单位。带双引号的+不带双引号=带双引号。在scss中，变量名称可以包含-嵌套有效的减少我们的代码量。
npm安装scss
m0_69149657的博客
03-02 427
【代码】npm安装scss。
解决Vue3中node.js与sass、sass-loader版本配对问题
weixin_43307006的博客
04-17 2404
node.js 16版本中需要的是sass和sass-loader， 而不是原来的node-sass和sass-loader 一种可行版本配对： node.js 16 -->sass 1.27.0 -->sass-loader 10.0.1;
Vue sass安装
weixin_48887108的博客
09-21 789
Vue项目中 sass安装 1.sass-loader依赖于node-sass,所以要安装node-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 2.在bui...
vue项目中使用scss
热门推荐
weixin_45665171的博客
03-29 1万+
vue项目中安装、引入、使用scss
Vue安装支持SCSS插件
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-05 5335
cnpm install node-sass --save-dev //安装node-sass cnpm install sass-loader --save-dev //安装sass-loader cnpm install style-loader --save-dev //安装style-loader 安装完成后，如果运行报以下错： Module build failed...
Scss的相关安装及使用
gygygydgh的博客
01-04 369
Scss 的相关安装及使用 一、相关介绍 1.Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。 2.关于 sass 和 scss 区别：scss其实是sass的更新版本而已。 3.使用scss的一些优点： （1）使用scss进行编写时，可以使css实现支持变量，函数，模块化的功能，使其加快开发效率，有效...
如何使用npm安装和使用sass和less
m0_65450343的博客
05-18 5681
首先，需要电脑安装有node和git 1，如何在npm安装和使用sass 安装命令： npm I node-sass -g 判断是否安装成功： node-sass -v 将scss编译为css: 例如： node-sass a.scss b.css 为什么是scss而不是sass文件，因为scss是sass的升级版，创建sass文件时后缀为 .scss 实时监听scss文件的变化： 例如： node-sass -...
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass，以及安装node-sass可能遇到的版本冲突问题
做笔记\记录遇到的程序bug
01-04 1万+
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass，以及安装node-sass可能遇到的版本冲突问题
安装scss及注意事项
m0_48355180的博客
01-11 2408
最好是安装指定版本，目前版本可用（不按版本的话） npm install sass-loader@7.3.1 npm install node-sass@4.14.1 然后就是配置了直接上截图（位置已经标明） 不想手写？别急，上代码-----> { test: /\.scss$/, loader: ['style', 'css', 'sass'] }, 收工 ...
【vue】scss的安装及基本用法
易小花的博客
11-12 7492
scss基本用法 在vue项目中的引用方式，指定语言为scss <style lang='scss' scoped> </style> 1.变量的使用 （1）以$开头声明变量 （2）变量具有作用域的。 （3）变量中连接符中划线和下划线是互通的。 例：声明一个错误信息的颜色值 <span class="error">错误文字</span> <span class="error2">错误2</span> <style lang="
yarn安装scss
03-29
要在Yarn中安装SCSS，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了Yarn。如果没有安装，请根据您的操作系统下载并安装Yarn。 2. 打开终端或命令提示符，并导航到您的项目目录。 3. 运行以下命令来初始化一个新的Yarn项目： ``` yarn init ``` 4. 在项目中安装SCSS依赖项。运行以下命令： ``` yarn add node-sass ``` 5. 安装完成后，您可以在项目中使用SCSS了。您可以创建一个SCSS文件，并使用SCSS语法编写样式。 6. 要将SCSS文件编译为CSS文件，您可以使用构建工具（如Webpack、Gulp等）或运行以下命令： ``` yarn run node-sass input.scss output.css ``` 其中，`input.scss`是您的SCSS文件，`output.css`是编译后生成的CSS文件。 请注意，以上步骤是基本的安装和使用SCSS的方法。具体的配置和使用方式可能因项目和工具而异。如果您正在使用特定的框架或构建工具，请参考其文档以获取更详细的指导。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值