挖坑记录：vite使用sass 报错：[plugin:vite:css] expected “；“.

7月前作者：Mr_Fink 分类：Toy博客阅读(30) 违法举报

这篇具有很好参考价值的文章主要介绍了挖坑记录：vite使用sass 报错：[plugin:vite:css] expected “；“.。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vite 挖坑记录

vite 引入sass依赖包，然后在vite.config.ts配置一下scss，这里就不详细说，不会的自行百度。

运行 yarn dev 项目

浏览器报错：

终端报错：

这时候一脸懵逼的，想着依赖包已经引入，vite.config.ts也配置了，开始以为是版本问题，或者以为是stylelint 样式约束问题。然后捣鼓了半天，再回去确认一遍配置少了 ; ~~o(>_<)o ~~

vite.config.ts 配置：

css: {
    preprocessorOptions: {
        scss: {
        	//错误： 配置最后少了 ";"
            //additionalData: `@import "@/styles/var.scss"`
            //正确：
			additionalData: `@import "@/styles/var.scss";`
        }
    }
},

配置一定要加 ;

由于自己的马虎，又给自己挖了个坑。文章来源地址https://www.toymoban.com/news/detail-604774.html

到了这里，关于挖坑记录：vite使用sass 报错：[plugin:vite:css] expected “；“.的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

解决vite-plugin-eslint引入type类型报错的问题

目前看npm包更新时间在一年前，报错原因可能是由于typescript变更导致依赖包package.json不匹配。看了github上各个大神提出的解决方案，有点看不懂，搞了很久才大致摸索出了，所以分享下 ———————————————— 思路是使用patch-package修改vite-plugin-eslint包源文件

2024年03月14日
浏览(72)
vue 报错：Elements in iteration expect to have ‘v-bind:key‘ directives.eslint-plugin-vue

原因：在用vscode 编写vue 代码时，因为安装的有vetur 插件，所以当代码中有v-for 语法时，会提示，“Elements in iteration expect to have ‘v-bind:key’ directives.eslint-plugin-vue” 这个错误。这是eslint 的功能，对vue 进行了eslint 检查。解决：第一种方法，添加 :key 属性在v-for 指令后加上

2024年02月05日
浏览(34)
解决报错：[plugin:vite-plugin-eslint] Failed to load config “standard“ to extend from.

解决方案一： eslint插件没有全部安装，安装以下插件：解决方案二：注释.eslintrc.cjs 文件中的standard，去掉standard后可能一些eslint标准配置就失效了，建议通过方案一方式解决。

2024年03月12日
浏览(56)
vite.config.js配置-解决跨域问题，以及@vitejs/plugin-vue等报错

在配置的过程中踩了很多坑，还是太菜，有些东西弄不明白什么意思。运行项目时的报错可直接到最下面看vite.config.js文件的注释目前项目用到的模块并不多，package.json文件如下其实主要还是这些模块的版本兼容问题 vite的版本最开始是1.0.0，后面很多地方搞不下去了才卸载

2023年04月08日
浏览(32)
vite打包优化vite-plugin-compression的使用

当前端资源过大时，服务器请求资源会比较慢。前端可以将资源通过Gzip压缩使文件体积减少大概60%左右，压缩后的文件，通过后端简单处理，浏览器可以将其正常解析出来。如果浏览器的请求头中包含 c ontent-encoding: gzip，即证明浏览器支持该属性。前端使用gzip压缩代码很容

2024年02月09日
浏览(30)
vite使用mock插件的配置(vite-plugin-mock)

mock经常在项目中使用，配置也是常有的事，故在此记录下来一、安装依赖二、配置 1、在项目的根目录 vite.config,ts 2、在./build/vite/plugin文件里面（此处文件是自行创建的） 3、在根目录创建一个mock文件，下面再细分各种文件，例如创建一个api / login.ts 4、在外部调用的

2024年02月16日
浏览(33)
使用vite创建Vue/React前端项目，配置@别名和Sass样式，又快又方便

Vite官方网站：Vite | 下一代的前端工具链 Vite 并不是基于 Webpack 的，它有自己的开发服务器，利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建，速度也更快。兼容性注意 Vite 需要 Node.js 版本 14.18+，16+。然

2024年02月14日
浏览(37)
解决webpack报错：You forgot to add ‘mini-css-extract-plugin‘ plugin

现象：原因： webpack5.72跟mini-css-extract-plugin有兼容性问题解决办法：把 new MiniCssExtractPlugin()放在webpack配置文件中plugins数组的第一项： plugins: [ // 此处解决报错：You forgot to add \\\'mini-css-extract-plugin\\\' plugin // MiniCssExtractPlugin必须放在plugins数组的第一项，否则会报

2024年02月07日
浏览(50)
css开发技巧（部分结合sass使用）

一、css 选择器基础选择器选择器别名说明版本常用 tag 标签选择器指定类型的标签 1 √ #id ID 选择器指定 id 的标签 1 √ .class 类选择器指定类名的标签 1 √ * 通配选择器所有类型的标签 2 √ div p 后代选择器元素的所有后代元素 1 √ divp 子代选择器所有父级是 div 元素

2024年02月10日
浏览(35)
使用vite-plugin-qiankun插件，将应用快速接入乾坤（vue3 vite）

qiankun官网 vite-plugin-qiankun插件github地址：vite-plugin-qiankun 1、安装乾坤 2、在主应用中注册微应用（main.ts） 3、挂载在App.vue挂载微应用节点 1、安装插件 qiankun目前是不支持vite的，需要借助插件完成 2、修改vite.config.ts 3、修改main.ts

2024年02月13日
浏览(35)