关于webpack中的main引入scss/sass文件报错的解决方案

最新推荐文章于 2024-01-04 17:41:29 发布

薛定谔的舔狗

最新推荐文章于 2024-01-04 17:41:29 发布

阅读量796

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_46380179/article/details/104958511

版权

关于webpack中的main引入scss/sass文件报错的解决方案

错误一
- 错误二

错误一

因为新的vue.cli3脚手架里面，当下载完相关配置文件（sass-loader和node-sass）的时候，是不需要再重新去webpack.base.conf.js里面配置相关的属性的

错误二

这个错误也是我自己出错的地方，百度了好久才解决问题。
主要的错误原因是因为sass-loader的版本太高了（我npm直接下的版本是8.0.0版本）。
解决的方法就是把原来的sass-loader卸载掉，重新下载一个低版本的（7.3.1）就解决问题了。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

薛定谔的舔狗

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

youyacoder的博客

07-15

720

主要讲解webpack 5 如何高效处理CSS 资源、scss/sass 资源、less 资源、 stylus 资源

【SCSS篇】Vite+Vue3项目全局引入scss文件

前端知识分享喵

10-12

4680

Vite+Vue3项目全局引入scss文件

参与评论您还未登录，请先登录后发表或查看评论

webpack支持scss文件，webpack sass配置

weixin_46787337的博客

07-12

1220

注意：这里是个坑，如果你在前端项目上配置webpack一定要安装的是而不是,这两个依赖不要同时装，同时装的话webpack优先使用那么就会报错

vue+webpack5项目中全局引入scss

weixin_42349568的博客

11-27

3463

一，安装插件 npm i sass-resources-loader -D 二，修改wenpack的rule配置 //全局引入scss变量 { test: /\.(css|scss|sass)$/, use: [ !prodMode ? 'style-loader' : { loader: MiniCssExtractPlugin.loader, optio

vue+webpack+sass 入坑 node-sass 报错！

weixin_33767813的博客

06-26

185

入坑第一件事安装sass install npm install sass-loader node-sass webpack --save-dev 事情来了！ node-sass 报错！Python2.7 ***** 一堆解决方法：主要是windows平台缺少编译环境， 1、先运行： npm install -g node-gyp 2、然后运行：运行 npm inst...

scss提取 vue_webpack,vue.js_如何用webpack提取出vue文件中的scss内容（引入了mixin文件编译报错）？，webpack,vue.js,sass - phpStudy...

weixin_39541693的博客

12-22

209

如何用webpack提取出vue文件中的scss内容(引入了mixin文件编译报错)？本意是想一个组件对应一个样式，当然sass的@mixin非常好用，在vue下引入了编写好的mixin文件，预期是应该webpack编译好了sass再生成单独css文件，实际是webpack直接把@include样式当成了字符串写入css文件。然后就会报错为mixin文件内unknown world。配置如下：we...

前端代码混淆webpack-obfuscator插件使用问题

最新发布

qq_43498878的博客

01-04

1146

使用打包后代码混淆（当时使用的webpack-obfuscator插件），使用Jekins清除工作空间后，重新install报错，

webpack4-pug-sass-example：在webpack4中使用pug和sass的示例配置

02-05

`main.js` 是 JavaScript 入口文件，它负责引入其他模块，包括 Pug 模板和 Sass 样式。例如，可以使用 `import` 语句导入 Pug 模板，并使用相应的库（如 `express`）将其渲染为 HTML。 ```javascript // main.js ...

webpack搭建scss环境

weixin_44411341的博客

07-22

1271

webpack搭建scss环境 scss: 它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素. 1.scss 运行环境 node-sass scss 文件需要在node平台运行,node-sass sass 是 scss sass的运行平台 2.目录结构 3.安装依赖 node-sass sass-loader 加载 Sass/SCSS 文件并将他们编译为 css css-loader

renren-fast-vue无法运行相关问题解决办法n ./src/assets/scss/index.scss Module build failed: Error: ENOENT: no su

qq_41556455的博客

07-22

5743

in ./src/assets/scss/index.scss Module build failed: Error: ENOENT: no such file or directory, scandir ‘C:\Users\xyy’s\Desktop\renren-fast-vue\node_modules\node-sass\vendor’ at Object.fs.readdirSync (fs.js:861:3) at Object.getInstalledBinaries (C:\Users\xy

[vite] Internal server error: Undefined mixin / Undefined variable. Vite+Vue3+TS+SCSS 全局样式引入出错解决方案

11-13

9276

在使用Vue3 + Vite2开发过程中，使用了SCSS 以往在main.js使用引入全局样式表就可以了 @import './styles/mixins.scss'; 但是实操中得到了这样的一个错误 [vite] Internal server error: Undefined mixin. 4 │ @include flex-row-lc; 翻阅文档: https://vitejs.bootcss.com/config/#css-preprocessoroptions 得知需要通过..

webpack里怎么配置Sass,非常实用！！！

youjinli122的博客

08-25

3085

在webpack里配置sass初次使用者一定是一脸懵逼。我也是试了很多次，在vue-cli里最佳的配置方法：步骤一：安装依赖包npm install node-sass --save-dev npm install sass-loader --save-dev步骤二：打开webpack.base.config.js在loaders里面加{ test: /\.scss$/, loade

06 webpack4.0学习笔记——配置文件_sass-loader使用

X北辰北的博客

06-13

3657

概述 sass-loader主要是将scss这类样式文件转换处理成我们常规的css样式文件，共浏览器识别调用，此loader也是我们经常使用的，所以接下来我们做一下介绍。具体操作步骤 1、此demo还是继续沿用前两篇文章中的demo代码，我们继续在rules中添加sass-loader的配置规则，如下： const path=require('...

vscode 中scanf()无法读入中文怎么办?_VS Code中C/CPP的完美配置(完成环境搭建、解决终端自动闪退、解决无法调试)...

weixin_39589693的博客

11-20

903

一、环境搭建下载VS CODE，MinGWVS CODE: https://code.visualstudio.com/MINGW:链接：https://pan.baidu.com/s/1Fw-7-_q4waHgy_UmRKWSqQ 提取码：02i9 安装VS Code、部署MinGW 这里安装VS Code不再赘述，安装到任意目录即可（但不要存在中文！！！）解压MinGW到任意目录（但不要存...

scss中webpack不打包@import url()引入的scss解决方案

yanhappiness

10-19

7717

解决方案 1.先讲解决方案 将 @import url("./**.scss") ; 改为 @import "./**.css"; 原因共同点：首先这两种引用方式都是从其他样式表导入样式规则到当前样式表中。不同点： @import url 是css的语法规则 @import [ < string > | < url > ] [ < media...

webpack4导入全局sass文件

https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e

07-15

2882

场景当我们在scss样式文件中想使用其他已经声明好的scss变量文件，通常会这么做： //index.scss @import "minix.scss"; body { color: $theme-color; } 随着项目越来越大，每个样式文件都需要用到全局定义好的变量，这时就变得非常的笨重，弊端就暴露出来了那么我们如何在react项目中解决这个问题呢安装安装sass-resou...

webpack.base.conf详解

一梦醉殇

12-26

3877

'use strict' //1、path模块是路径设置，不论是在这个配置中还是其他配置中，都是必不可少的。 //2、util是对vue-loader对于css预编译一些提取的工具模块，因为对于个人开发而言，里面提供了sass,less,stylus,possCss等一系列预编译解析的loader。 //3、config是对开发环境和生产环境的一系列不同参数的路径等配置。 //4、vueL

vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入

我说我是学霸你信吗的博客

05-08

3255

vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style-loader 如果没有安装，运行一下命令安装 npm install node-sass sass-loader style-loader --save 找到vue.config.js加入配置信息 m...

使用webpack引入sass全局变量

Winne_Shen的专栏

06-09

8495

使用webpack引入sass全局变量 sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。傻瓜式引用 ...

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (/Users/xianingzhong/Desktop/ep-invest-vue-master-033b6283eda70d811e6a0912aac0566e4b615fdc/node_modules/sass-loader/dist/index.js:19:24) @ ./src/styles/index.scss 4:14-201 14:3-18:5 15:22-209 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:9530 (webpack)/hot/dev-server.js ./src/main.j

07-22

这个错误通常是由于 sass-loader 版本不兼容或配置错误导致的。你可以尝试以下解决方案： 1. 确保你的 sass-loader 版本与 webpack 版本兼容。可以尝试升级或降级 sass-loader 到与你的 webpack 版本兼容的版本。 2. 检查你的 webpack 配置文件，确保正确配置了 sass-loader。你可以在 webpack 配置文件中找到 sass-loader 的部分，并检查是否正确设置了 options。如果以上方法都没有解决问题，可以提供更多的错误信息或完整的错误堆栈跟踪，以便我更好地帮助你解决问题。