使用webpack自动引入sass全局变量

最新推荐文章于 2024-03-06 22:00:53 发布

原创最新推荐文章于 2024-03-06 22:00:53 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#sass #webpack

sass 同时被 2 个专栏收录

8 篇文章

订阅专栏

webpack

3 篇文章

订阅专栏

本文介绍了在大型项目中如何通过sass-resources-loader有效地管理全局scss变量，避免每个页面重复引入，提高代码组织和维护性。步骤包括安装插件、配置vue.config.js的webpack规则，指向资源文件路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当项目越来越大的时候，便于后期维护和代码的编写效率提取css是必须的但是每个页面都又可能用到全局声明的 scss变量每个页面引入？显然不是程序猿的作风，
于是 sass-resources-loader 闪亮登场

第一步： cnpm install sass-resources-loader --D
第二步：找到vue.config.js , 找到chainWebpack选项
第三步：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources
          resources: './path/to/resources.scss',
 
          // Or array of paths
          resources: ['./path/to/vars.scss', './path/to/mixins.scss']
        })
        .end()
    })
  }
}