VUE CLI3 less 全局变量引用

Posted 2021-03-23 ajaemp

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE CLI3 less 全局变量引用相关的知识，希望对你有一定的参考价值。

方法一

1、添加依赖 style-resources-loader

2、vue.config.js中添加

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [],
    },
  },
};

3、添加全局less引入

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/varibles.less'),
      ],
    },
  },
};

4、加入path

const path = require('path');

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/varibles.less'),
      ],
    },
  },
};

方法二

const path = require('path')

module.exports = {
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    },
    css: {
      loaderOptions: {
        less: {
          javascriptEnabled: true
        }
      }
    }
}

function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, 'src/styles/variable.less'), // 需要全局导入的less
            ],
        })
}

方法三

module.exports = {
  css: {
    loaderOptions: {
      less: {
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

以上是关于VUE CLI3 less 全局变量引用的主要内容，如果未能解决你的问题，请参考以下文章

vue cli3.0配置全局变量

vue cli3使用官方方法配置sass全局变量报错ValidationError: Invalid options object. Sass Loader has been initialised