zoukankan      html  css  js  c++  java
  • 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'
            }
          }
        }
      }
    }
    
  • 相关阅读:
    多态与异常处理课后作业
    Java接口与继承作业
    大道至简第六章随笔
    大道至简第五章随笔
    Java数组课程作业
    大道至简第四章随笔
    String课后作业
    大道至简第三章随笔
    Java语法基础动手动脑实践
    大道至简-第二章 心得体会
  • 原文地址:https://www.cnblogs.com/ajaemp/p/12024106.html
Copyright © 2011-2022 走看看