1. 前言

1. 今天的面试 都是针对 实际开发的问题 ,没遇到就是遇到
2. 哈哈 知之为知之 不知为不知,不过面试的时候确实会有些想不起来,出门想起了

---

2. 背景

1. 不想在每个文件都 进行import导入变量
2. 所以定义公共变量
3. 那在哪定义呢

---

3. webpack配置 sass 公共变量

1. Webpack配置中使用sass-loader的prependData选项来自动注入变量

module.exports = {
  // ...其他配置...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 在这里设置共享的Sass变量
              prependData: `@import "@/path/to/your/shared-variables.scss";`,
            },
          },
        ],
      },
    ],
  },
  // ...其他配置...
};

1. 用prependData选项来将@import指令添加到每个Sass文件的开头
2. 从而自动将shared-variables.scss文件中的变量注入到所有Sass文件中。
3. 确保替换 @/path/to/your/shared-variables.scss为你的实际文件路径

4. 这样配置后，你就可以在所有的Sass文件中使用shared-variables.scss中定义的变量，而无需在每个文件中手动导入它们

---

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉