关于vite:关于Vite配置preprocessorOptionsscssadditionalData全局引入scss文件无效问题

80次阅读

共计 986 个字符，预计需要花费 3 分钟才能阅读完成。

在 vite 我的项目中，有时候咱们须要全局引入 css 变量、scss 变量，或者引入全局 scss 款式文件，vite 提供了以下这种配置形式

//vite.config.js
css: {
  preprocessorOptions: {
    //define global scss variable
    scss: {additionalData: `@import '@/styles/variables.scss';`,},
  },
}

这种写法没有任何问题，并且我曾经在一些我的项目中实际过了，可有一次我创立新我的项目的时候却有效了，在浏览器上也没有看到任何相干的款式，然而在 main.js 中引入又是失常的

我先是排查写法和门路是否有问题，而后排查 sass 或者 vite 的版本是否有问题，排查几个小时下来发现都没有问题，纳闷不已，惟一能确定的是 vite 的问题

于是我就想，兴许他人也碰到过这种问题，当我找遍各大博客网站都没答案后（一大堆斗争说间接在 main.js 引入就好的），我筹备去 Vite 仓库提各 Issue

当我尝试查一下有没有相似的 Issue 时，发现居然有好几个相似的 Issue，还是敞开状态，难道这个问题曾经解决了？我一个一个点开看，终于在其中一个 Issue 中找到了答案

#issue5682

原来这不是一个 bug，只有在 main.js 引入一个其余 scss 文件或者在.vue 文件中应用 <style lang=”scss”><style>，并且外面有内容，则 scss.additionalData 配置的全局 scss 文件就能够正确引入了，还倡议咱们在 scss.additionalData 引入的文件最好只写 scss 变量，别写 css 变量，因为 css 变量是运行时属性

至此，这个问题算是圆满解决了

最近我开源了一个 Vite+Vue3+NaiveUI+Pinia 的轻量级后盾治理模板，十分实用于中小型我的项目或者集体我的项目，感兴趣的能够看下，欢送参加开源、star、fork

文章：

Vite+Vue3+NaiveUI+Pinia 搭建一套优雅的后盾治理模板，真香 – 掘金 (juejin.cn)

预览：

template.qszone.com

源码：

github:(https://github.com/zclzone/vue-naive-admin)

gitee:(https://gitee.com/zclzone/vue-naive-admin)

正文完