App.vue引入全局公共样式common.less

下面介绍两种使用方式: 局部和全局使用,在这之前基本的依赖配置一下
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

现在是局部和全局使用的补充配置,如下

使用方式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')
      }
    }),

现在准备就绪了,在common.js中定义变量,如下

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

在组件style中使用

    .medium {
      color:@font-color;
    }

--by Affandi ⊙▽⊙