vue 使用less全局变量

最新推荐文章于 2024-07-09 13:44:44 发布

愚公

最新推荐文章于 2024-07-09 13:44:44 发布

阅读量624

点赞数

分类专栏： vue 文章标签： vue.js less sass

本文链接：https://blog.csdn.net/gftoso/article/details/122575572

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

npm install sass-resources-loader --save-dev

// 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', './path/to/functions.scss']
        })
        .end()
    })
  }
}

//在common.less文件中
@sidebar:240px;
@headerHeight:65px;
@bodyMinWidth: 700px;

// 在vue组件中直接使用
<style lang='less' scoped>
  .content {
    background:red;
    height:auto;
    margin-left: @sidebar;
    width: calc(100%-@sidebar);
  }
</style>