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

这篇具有很好参考价值的文章主要介绍了挖坑记录: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日
    浏览(83)
  • 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日
    浏览(43)
  • 解决报错:[plugin:vite-plugin-eslint] Failed to load config “standard“ to extend from.

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

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

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

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

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

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

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

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

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

    2024年02月14日
    浏览(52)
  • 解决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日
    浏览(58)
  • css开发技巧(部分结合sass使用)

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

    2024年02月10日
    浏览(43)
  • 使用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日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包