webpack 配置 sass 公共变量

简介: webpack 配置 sass 公共变量

1. 前言

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

2. 背景

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

3.  webpack配置 sass 公共变量

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

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中定义的变量,而无需在每个文件中手动导入它们


参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
28天前
|
人工智能 移动开发 前端开发
【利用AI让知识体系化】Webpack 相关配置技巧(三)
【利用AI让知识体系化】Webpack 相关配置技巧
|
28天前
|
人工智能 缓存 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(二)
【利用AI让知识体系化】Webpack 相关配置技巧
|
28天前
|
人工智能 前端开发 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(一)
【利用AI让知识体系化】Webpack 相关配置技巧
|
29天前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
11 0
|
2月前
|
JavaScript 应用服务中间件 nginx
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
56 0
|
2月前
|
JSON JavaScript 前端开发
Webpack的ts的配置详细教程
Webpack的ts的配置详细教程
34 0
|
2月前
|
前端开发 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack核心配置结构
《Webpack5 核心原理与应用实践》学习笔记-> webpack核心配置结构
46 1
|
2月前
|
缓存 前端开发 JavaScript
《Webpack5 核心原理与应用实践》番外篇->webpack配置合并
《Webpack5 核心原理与应用实践》番外篇->webpack配置合并
30 0
|
3月前
|
前端开发 中间件 应用服务中间件
webpack代理proxy配置
前端项目开发中我们经常会用到 proxy 代理来解决接口跨域问题,通常是在 webpack.config.js 或 vue.config.js 或 vite.config.js 中配置
46 0
|
4月前
|
前端开发 JavaScript
webpack的打包配置
webpack的打包配置

热门文章

最新文章