less如何注册全局的属性

最新推荐文章于 2023-12-15 22:40:26 发布

厚渡

最新推荐文章于 2023-12-15 22:40:26 发布

阅读量5.8k

点赞数

分类专栏： vue vue配置文章标签： css vue less

本文链接：https://blog.csdn.net/dwp_wz/article/details/115308421

版权

vue 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue配置

9 篇文章 0 订阅

订阅专栏

这篇博客介绍了在Web开发中，特别是在Vue项目中如何定义和使用Less全局属性。通过配置`vue.config.js`文件，利用`sass-resources-loader`解决非同文件中引用不到全局变量的问题，确保在多个组件中可以共用同一组样式变量，提高代码复用性和可维护性。

摘要由CSDN通过智能技术生成

在web项目的开发中less的使用比较的多
那么怎么定义less的全局属性
例如：

同文件中

/*   style/config.less */
@themeColor: #f37b1d;


/* 同文件中 */

.item.active {
   color: @themeColor;
   border-color: @themeColor;
}

非同文件中

/*  某个不知名的的vue文件 */
.item.active {
   color: @themeColor;
   border-color: @themeColor;
}

正常来说会报错

如何解决

// 配置 全局 less 加载前的变量 先下载依赖
// npm i sass-resources-loader -s


// vue.config.js
module.exports = {
  publicPath: "./",
  outputDir: 'dist',
  /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
  assetsDir: "static",
  chainWebpack: (config) => {
    // 配置 @ 路径
    config.resolve.alias
      .set('@', resolve('src'))
    // 配置 全局 less 加载前的变量
    // npm i sass-resources-loader -s
    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: resolve('src') + '/style/config.less',
          // Or array of paths
          // resources: ['./path/to/vars.scss', './path/to/mixins.scss', './path/to/functions.scss']
        })
        .end()
    })
  },
}