下面介紹兩種使用方式: 局部和全局使用,在這之前基本的依賴配置一下
1安裝less 和less-loader肯定是少不了

npm install less less-loader 

2.修改webpack.base.config.js文件，配置loader加載依賴，讓其支持外部的less，即在原來的代碼上添加

{ 
  test: /\.less$/, 
  loader: "style-loader!css-loader!less-loader", 
},

image.png

現(xiàn)在是局部和全局使用的補充配置,如下

使用方式1--局部組件使用: 組件在使用less變量時，需要單獨在組件style中引入文件

<style lang="less" scoped>
@import '@/assets/style/common.less';
</style>

使用方式2--全局使用:
1.需要安裝sass-resources-loader。

npm install sass-resources-loader

2.找到build文件夾下面的utils.js 找到
less: generateLoaders('less')

//替換成如下
less: generateLoaders('less').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/assets/style/common.less')
      }
    }),

現(xiàn)在準(zhǔn)備就緒了,在common.js中定義變量,如下

// 布局
// 樣式
@font-color:rgba(255, 255, 255, 0.7);

在組件style中使用

    .medium {
      color:@font-color;
    }

--by Affandi ⊙▽⊙