vue项目中定义全局变量并使用(无需在使用处二次引入)

最新推荐文章于 2025-02-08 18:23:54 发布

原创最新推荐文章于 2025-02-08 18:23:54 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #前端

vue【web端】项目那些事同时被 3 个专栏收录

6 篇文章

订阅专栏

前端工程化

4 篇文章

订阅专栏

前端项目工程化

1 篇文章

订阅专栏

这段代码展示了如何在Vue项目的vue.config.js中配置`sass-resources-loader`，使其加载并复用全局样式资源。首先引入`webpack`和`path`模块，然后在`chainWebpack`配置中处理'less'规则，添加`sass-resources-loader`，指定资源路径为`src/style/base.less`。安装依赖`npm install sass-resources-loader --save-dev`并重启项目后，即可生效。

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

先上代码

//需要引入：
const webpack = require('webpack')
const path = require('path')



chainWebpack: config => {
    const oneOfsMap = config.module.rule('less').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources
          resources: path.resolve('./src/style/base.less'),

          // Or array of paths
        })
        .end()
    })
  }

以上代码都是在vue.config.js中加入，该项与devServer项平级；在配置好文件之后还需要执行npm install sass-resources-loader --save-dev 下载依赖，重启项目就可以使用了。