【Vue3-cli】vue3如何支持SCSS语言【请注意webpack和sass-loader版本】

最新推荐文章于 2023-11-30 19:56:29 发布
最新推荐文章于 2023-11-30 19:56:29 发布
阅读量492 收藏
点赞数
文章标签： scss javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43343144/article/details/120760178
版权

vue3.x scss语法支持 - 胡勇健 - 博客园

安装sass-loader之前必须先安装【参考：sass-loader - npm】
==>请注意这里安装的webpack版本,如果是最新版本可能报错！
 

npm install sass-loader sass webpack@^4.0.0 --save-dev

安装sass-loader【此版本没问题,版本不能太高,否则会报错】
npm install sass-loader@10.2.0 --save-dev
安装node-sass
npm install node-sass --save-dev
重启服务
npm run serve

如果webpack版本不兼容,可能提示错误：

Error: Rule can only have one resource source (provided resource and test + include + exclude)_比特币爱好者007的博客-CSDN博客

sass-loader版本不能太高,否则会报错：

Syntax Error: TypeError: this.getOptions is not a function_比特币爱好者007的博客-CSDN博客

weixin_43343144
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack4.x - 4 loader处理css和sass
wltsysterm的博客
07-21 517
目录 背景 loader概念 用 css-loader 和 style-loader 处理 CSS css-loader 和 style-loader安装 配置文件新增css-loader style-loader 用 sass-loader和node-sass把 SASS 编译成 CSS 安装sass-loader和node-sass 配置文件新增scss-loader 背景 前面我们引入了html-webpack-plugin，细心的同学发现怎么一直都没有讲css呢。因为css的
webpack相关（二）
m0_46208009的博客
03-11 66
webpack相关（二） 基础依赖 1 "css-loader": "^5.1.1", 2 "style-loader": "^2.0.0", 3 "html-webpack-plugin": "^5.3.0", 4 "webpack": "^5.24.4", 5 "webpack-cli": "^4.5.0", 6 "webpack-dev-server": "^3.11.2" 7 "@babel/core": "^7.13.10", 8 "@babel/p
前端开发中webpack常用的node-sass、sass-loader、style-loader等区别作用
qq_43886365的博客
09-30 3379
前端开发中webpack常用的node-sass、sass-loader、style-loader、style-loader等区别作用
【webpack】webpack3.6.0 兼容问题 loaders
weixin_45650440的博客
09-17 439
参考: webpack3.6.0版本与loaders，plugins版本的兼容性问题解决. ERROR in ./src/main.js Module not found: Error: Can’t resolve ‘./css/special’ in ‘E:\DEMO\webpack的使用-v2\03-webpack的loader\src’ 解决 //原来没有文件名 .less require('./css/special.less') ...
2-2 (webapack4 loader)-webpack编译less和sass文件
xt_123456的博客
05-12 235
1.webpack编译less 首先在入口的文件夹下新建index.less文件，写入样式。在index.js文件中引入index.less，代码为import './index.less'; 1）安装loader 需要安装less-loader和less 打开终端，进入到项目文件夹的路径，输入命令npm install less-loader less --save-dev，如下图所示： 2）配置loader 在webpack.config.js里配置module中的rules，代码为： module:{
前端学习案例7-webpack中sass-loader
qq_41632427的博客
12-10 324
前端
vue cli webpack中使用sass的方法
08-27
在 Vue CLI 项目中使用 SASS 需要安装相应的依赖项和配置loader，下面将详细介绍 Vue CLI Webpack 中使用 SASS 的方法。 安装依赖 首先，需要安装 SASS 相关的依赖项，使用 npm 安装 sass-loader 和 node-sass： ...
基于webpack4+vue-cli3项目实现换肤功能
10-16
在这个场景中，我们将讨论如何在基于 Vue CLI 3 和 Webpack 4 的项目中实现换肤功能，特别是利用 SCSS 和 style-loader 的 useable 特性。 首先，换肤功能通常涉及到全局样式的切换，这可能包括颜色、字体、图片等...
vue2-sass-config:Vue2（不是Vue3）SASS配置示例
05-19
然而，需要注意的是，`sass-loader`的版本应该与Webpack版本相匹配，因为从版本11开始，`sass-loader`要求Webpack 5，这可能与许多Vue2项目仍在使用的Webpack 4不兼容。因此，我们应该锁定`sass-loader`的一个较低...
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
08-27
use: ['style-loader', 'css-loader', 'sass-loader'] } ``` 最后，在 `.vue` 文件中使用 `lang="scss"` 来启用 Sass： ```html <style lang="scss" scoped> /* Your SCSS code here */ ``` 至于 Swiper，它是...
在vue-cli 3中给stylus、sass样式传入共享的全局变量
12-10
在实际应用中，确保你已经安装了对应的预处理器（如`sass-loader`和`node-sass`或`stylus-loader`）并且它们与Vue CLI的版本兼容。 总之，通过在`vue.config.js`中正确配置`css.loaderOptions`，我们可以方便地为...
webpack4.0各个击破（2）—— CSS篇
weixin_33758863的博客
08-20 160
webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的参数配置及使用方式均基于webpack4.0版本） 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写，那么在打包中需要处理的基本...
webpack 3/4踩坑，我太难了，从安装、卸载、到使用，各相应的版本号，sass-loader报错-版本的原因，webpack -v 不识别，没卸载干净...
09-04 4969
-先说卸载： wabpack@4对应的每个插件的版本号都在最后　 1 全局安装的话，npm uninstall webpack -g 有时候并不能卸载干净， 2 webpack -v 可判断是否安装成功，全局安装的可以用这个判断，局部安装的不能 3 卸载不干净导致后面安装其他的都webpack -v识别不了 4 　 先uninstall...
Webpack4 配置 scss Loader
liujun2son
07-17 4812
1.配置 scss Loader SCSS 可以让你用更灵活的方式写 CSS。 它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素。SCSS 又叫 SASS，区别在于 SASS 语法类似 Ruby，而 SCSS 语法类似 CSS，对于熟悉 CSS 的前端工程师来说会更喜欢 SCSS。 使用 SCSS 可以提升编码效率，但是必须把 SCSS 源代码编译成可以直接在浏览器...
webpack3最新版本配置研究（二）loader
机智的皮卡丘的博客
07-10 9609
接上面的loaderurl-loader 现在来我们来试试加载图片，第一件事情肯定是安装对应的loader，可以将小图片转换成base64，减少请求 npm install url-loader file-loader –save-dev//修改index.html加两个div，背景图片设置成两张图片，一个小的，一个大的 <!DOCTYPE html> <html lang="en"> <hea
webpack配置sass-loader样式自动前置
Suk__的博客
03-13 3123
插件要安装sass,sass-loader配置好后就不用每个文件都引入了,直接用就行。
webpack打包sass失败
m0_47195133的博客
05-17 433
webpack打包sass失败
webpack配置scss loader
最新发布
liyananweb的博客
11-30 2151
请记住，这些配置可能需要根据你的具体项目需求进行调整。如果你使用的是如 Create React App 或 Next.js 这样的构建工具，它们可能已经内置了对 Sass 的支持，你可能不需要手动更改 Webpack 配置。如果你想使用 CSS Modules（这允许你将 CSS 类名局部化，以避免全局冲突），你可以调整。如果你想将 CSS 提取到单独的文件中，而不是将它们注入到 JavaScript 中，你可以使用。文件中，你需要添加一个规则来告诉 Webpack 如何处理。的替代品，更快且更可靠）。
用webpack4.17版本手动配置vue的项目
MrzhangxianshengJS的博客
08-27 2074
用webpack4.17版本手动配置vue的项目 一 使用webpack最新版本 配置的初衷 现在webpack的版本已经升级到了4.0以上版本，增加了许多好用的功能，但是我们的vue-cli脚手架的webpack版本还是之前的3.0+的版本，许多功能已经被4.0所放弃了，现在webpack的4.0版本比较成熟，可以运用在项目中。刚进了一家新公司,新公司因为权限的问题不能使用脚手架，所以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值