Vue2项目中Buefy不响应Sass自定义样式、刷新后样式丢失求助

可能的原因及解决方法 #

• 排查引入顺序冲突
  首先检查main.js中是否引入了Buefy/Bulma的预编译CSS文件，比如import 'buefy/dist/buefy.css'、import 'bulma/css/bulma.css'这一类代码。预编译的CSS是已经把变量写死的静态文件，加载顺序早于App.vue中编译的SCSS样式，热更新时修改App.vue生成的新样式会临时后插入页面所以生效，刷新后预编译CSS优先加载就会覆盖你的自定义样式。如果存在这类引入直接删除即可，你的自定义SCSS中已经通过@import引入了源码样式，不需要额外引入预编译CSS。
• 调整变量注入时机
  直接把自定义SCSS写在App.vue的style中可能存在加载时机晚的问题，最优方案是单独抽离全局变量文件：
  1. 新建src/styles/buefy-custom.scss，把你当前App.vue style里的所有SCSS代码复制进去
  2. 在vue.config.js中配置sass-loader全局注入该文件，保证变量在所有SCSS加载前就声明，针对你用的sass-loader v10版本配置如下：

  module.exports = {
    css: {
      loaderOptions: {
        scss: {
          prependData: `@import "~@/styles/buefy-custom.scss";`
        }
      }
    }
  }
  

  3. 删除App.vue中对应的SCSS样式代码，避免重复引入。
• 检查style标签属性
  确认App.vue的style标签没有加scoped属性，加了scoped之后，里面的变量和@import只会作用于当前组件，无法全局覆盖Bulma/Buefy的默认变量。
• 清理缓存重试
  如果以上配置都没问题，可删除项目的node_modules文件夹、package-lock.json/yarn.lock文件，重新执行npm install安装依赖，同时清理浏览器缓存后再启动开发服务验证，也可以执行npm run build后查看打包产物的样式是否符合预期，区分是开发服务缓存问题还是编译逻辑问题。
• 排查全局样式冲突
  检查public/index.html中是否引入了第三方CDN的Bulma/Buefy样式文件，或者项目中其他全局样式文件加载顺序晚于你的自定义样式，覆盖了生成的主题样式。

内容的提问来源于stack exchange，提问作者Jonas__G