无法覆盖Sass变量：如何让自定义variables.scss后于keen-ui加载？

我之前也碰到过一模一样的Sass变量加载顺序坑，Keen-UI的样式基于Sass编写，变量覆盖的核心就是让你的自定义变量在库的标准变量之后加载，这样后定义的变量才能覆盖前面的。给你几个实用的解决方案：

方案1：手动控制主样式文件的导入顺序 #

这是最直观的方法，在你的项目主样式文件（比如main.scss）里按以下顺序导入：

// 1. 先加载Keen-UI的标准变量文件
@import '~keen-ui/src/styles/variables';
// 2. 再加载你的自定义变量文件（路径根据你的项目结构调整）
@import './styles/custom-variables.scss';
// 3. 最后加载Keen-UI的核心样式
@import '~keen-ui/src/styles/main';

这样编译时，你的自定义变量会覆盖Keen-UI的默认变量，所有依赖这些变量的组件样式都会自动使用你定义的值。

方案2：通过webpack的sass-loader自动注入（全局生效） #

如果不想在每个样式文件里手动导入变量，可以通过sass-loader的配置实现全局自动注入，确保自定义变量始终在库变量之后加载：

针对sass-loader v10+版本 #

// webpack.config.js 或 vue.config.js（Vue项目）
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: `
                @import "~keen-ui/src/styles/variables";
                @import "@/styles/custom-variables.scss"; // @是src目录的别名，根据你的配置调整
              `,
            },
          },
        ],
      },
    ],
  },
};

针对sass-loader v8-v9版本 #

旧版本的sass-loader用prependData代替additionalData：

options: {
  prependData: `
    @import "~keen-ui/src/styles/variables";
    @import "@/styles/custom-variables.scss";
  `,
}

配置后，所有Sass文件编译时都会自动按顺序加载这两个变量文件，无需手动导入。

注意事项 #

• 确认Keen-UI变量文件的路径：不同版本的Keen-UI可能存放路径不同，比如部分版本变量文件在keen-ui/lib/styles/variables，如果导入报错，检查node_modules里的Keen-UI目录结构。
• 变量命名要完全匹配：确保你的自定义变量和Keen-UI的变量名一致，比如$kui-primary-color（具体看Keen-UI的variables.scss里的变量名），否则无法覆盖。

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