在Nuxt项目中修改BootstrapVue SCSS变量自定义primary主色失败求助

问题修复步骤 #

失效核心原因是自定义变量未在Bootstrap默认样式加载前完成注入，按以下步骤调整即可：

• 第一步：调整nuxt.config.js配置，禁用BootstrapVue自动加载默认CSS

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
    ['nuxt-mq'],
    // 新增配置关闭自动导入默认样式
    ['bootstrap-vue/nuxt', {
      css: false
    }],
    '@nuxtjs/proxy',
    '@nuxtjs/style-resources'        
],
styleResources: {
    scss: ['@/assets/scss/customTheme.scss']
},
css: [
    '@/assets/scss/customTheme.scss'
]

• 第二步：修改@/assets/scss/customTheme.scss内容，变量定义必须放在Bootstrap样式导入语句之前

// 先自定义覆盖变量
$primary: #00BFA5;

// 再导入Bootstrap、BootstrapVue的SCSS文件，使自定义变量生效
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index.scss';

• 第三步：依赖版本兼容处理（如调整上述配置后仍失效可执行）
  Nuxt2对高版本sass-loader兼容性差，执行以下命令重装适配版本：

npm uninstall sass-loader sass
npm install sass@1 sass-loader@10 --save-dev

所有配置修改完成后，需重启Nuxt开发服务方可生效。

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