vue 使用less全局变量

第一步:
npm install sass-resources-loader --save-dev
第二步:

然后在build 的utils.js中找到less: generateLoaders('less') 并更改为如下:

less: generateLoaders('less').concat({
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/css/common.less')
        }
    })

path.resolve(__dirname, '../src/assets/css/common.less')路径即为自己对应的公共less文件,修改完配置文件记得重启服务器:npm run dev

第三步,如下使用:
//在common.less文件中
@sidebar:240px;
@headerHeight:65px;
@bodyMinWidth: 700px;
// 在vue组件中直接使用


你可能感兴趣的:(vue 使用less全局变量)