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

快来打我* 2022-09-16 01:19 125阅读 0赞

[vue3.x scss语法支持 - 胡勇健 - 博客园][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博客][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博客][Syntax Error_ TypeError_ this.getOptions is not a function_007_-CSDN]

[vue3.x scss_ - _ -]: https://www.cnblogs.com/hu308830232/p/14910894.html
[sass-loader - npm]: https://www.npmjs.com/package/sass-loader
[Error_ Rule can only have one resource source _provided resource and test _ include _ exclude_007_-CSDN]: https://blog.csdn.net/weixin_43343144/article/details/120760049
[Syntax Error_ TypeError_ this.getOptions is not a function_007_-CSDN]: https://blog.csdn.net/weixin_43343144/article/details/120760376

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用 Vue3 + Vite + SCSS 轻松实现换肤功能

一个网站的换肤效果算是一个比较常见的功能，尤其是在后台管理系统中，我们几乎都能看到他的身影，这里给大家提供一个实现思路。

柔情只为你懂/ 2024年04月29日 11:39/ 0 赞/ 72 阅读

相关微前端-qiankun：vue3-vite 接入 vue3-webpack

一、背景主应用：vue3、vite [主项目接入qiankun][qiankun] 子应用：vue3、webpack 二、代码-接入子应用 2.1、src/publ

深藏阁楼爱情的钟/ 2024年03月25日 14:56/ 0 赞/ 24 阅读

相关 vue3项目安装scss并使用

1.sass-loader依赖于node-sass，所以要安装node-sass npm install node-sass@4.14.1 --save-dev

分手后的思念是犯贱/ 2024年03月24日 19:33/ 0 赞/ 99 阅读

相关 webpack 中vue文件使用scss需要注意的地方

需要使用npm添加node\_sass和sass\_loader 并且在配置文件中添加规则： { test: /\.scss

Dear 丶/ 2023年08月17日 17:23/ 0 赞/ 117 阅读

相关 vue-cli3.0+安装使用scss

安装在项目目录打开命令行工具输入如下内容安装sass，以及sass-loader npm install node-sass --save npm

àì夳堔傛蜴生んèń/ 2023年06月15日 11:17/ 0 赞/ 8 阅读

相关 vue-cli 3 全局引入scss变量

1、安装sass-resources-loader npm install sass-resources-loader -S 2、在根路径下（package.jso

系统管理员/ 2023年02月14日 06:47/ 0 赞/ 25 阅读

相关【Vue3-cli】vue3如何支持SCSS语言【请注意:webpack版本】

[vue3.x scss语法支持 - 胡勇健 - 博客园][vue3.x scss_ - _ -] 安装sass-loader之前必须先安装【参考：[sass-loader

快来打我*/ 2022年09月16日 01:19/ 0 赞/ 126 阅读

相关 Vue-Cli 3 引入 SCSS 全局变量

首先创建一个全局变量文件 `global.scss` $theme-color: efefef; 复制代码编辑`vue.config.js`

以你之姓@/ 2022年01月19日 00:21/ 0 赞/ 716 阅读

相关 webpack_3

![1726006-20190723234345481-703495301.png][] url-loader {

桃扇骨/ 2021年11月11日 00:26/ 0 赞/ 248 阅读

相关 vue2+webpack4+scss

前要由于webpack的配置具有实时性，之前搭建的vue2项目是基于webpack2，因此，特地在此维护一篇关于webpack4搭建vue2项目的说明，会及时更新（gi...

红太狼/ 2021年03月23日 13:46/ 0 赞/ 522 阅读