vue-cli4配置less全局變量

一、安裝依賴

yarn add --dev less-loader less
yarn add --dev style-resources-loader

二、配置

在vue.config.js文件中添加：

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
   pluginOptions: { // 第三方插件配置
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [path.resolve(__dirname, 'src/assets/styles/variables.less')] // less所在文件路徑
        }
     }
 }

三、使用

在variables.less文件中聲明變量：

@blue:#00f;
@red:#f00;
@green:#0f0;

在.vue文件中使用：

<style lang="less" scoped>
   .h2{
       color: @red; // 聲明的less樣式變量
   }
</style>

注意：如果發現頁面引入一直報錯，說找不到、不存在或者定義無效等錯誤，那么還需要安裝依賴：

yarn add --dev vue-cli-plugin-style-resources-loader

其實，正常情況下載安裝依賴style-resources-loader時，會同時安裝vue-cli-plugin-style-resources-loader，可能有其它不確定原因導致vue-cli-plugin-style-resources-loader安裝失敗，出錯的話就需要手動安裝了。

安裝完成，重啟服務即可。