解決或使用vue的less全局變量

在vue中，可以通過以下方法，解決既可以在組件中使用全局變量，也可以在less文件中使用全局變量

　　已經安裝less和less-loader的進行下面的操作，如果沒有安裝的就先安裝這兩個依賴

• 過渡3.0版本的vue-cil解決方案

1. 定義一個存放變量的less文件
2. 安裝style-resources-loader，vue-cli-plugin-style-resources-loader
   

   npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

3. 在vue.config.js中，把變量的less文件配置進去

   const path = require('path') // 這個是需要的
   
   module.exports = {
     pluginOptions: {
       // 添加下面這段。src/style/globalValue.less為存放變量的路徑＋文件
       'style-resources-loader': {
         preProcessor: 'less',
         patterns: [path.resolve(__dirname, "src/style/globalValue.less")]
       }
     }
   }

4. 起服務無報錯忽略；有報錯（cannot read property 'srtle-resources-loader' of undefined），就在vue.config.js中添加以下這段代碼

   pluginOptions: {
       "style-resources-loader": {
         preProcessor: "less",
         patterns: [],
       },
     },

    

• 2.0版本的解決方案

1. 　　安裝依賴sass-resources-loader
   

   npm i sass-resources-loader -D

2. 安裝完sass-resources-loader后,咱們還需要簡單配置下webpack
   
   1. 找到build/utils.js文件
   2. 在cssLoaders函數中添加使用全局less函數
      

      function lessResourceLoader() { // 增加全局使用less函數
          var loaders = [
            cssLoader,
            'less-loader',
            {
              loader: 'sass-resources-loader',
              options: {
                resources: [
                  path.resolve(__dirname, '../src/style/_color.less'), //定義全局變量的文件路徑
                ]
              }
            }
          ];
          if (options.extract) {
            return ExtractTextPlugin.extract({
              use: loaders,
              fallback: 'vue-style-loader'
            })
          } else {
            return ['vue-style-loader'].concat(loaders)
          }
        }

   3. 在return中用lessResourceLoader() (代表的是你寫函數所使用的名字,自己可以起任意名字) 替換之前less函數
      

      return {
          css: generateLoaders(),
          postcss: generateLoaders(),
          less: lessResourceLoader(), // 替換之后
          // less: generateLoaders('less'), // 原webpack配置的
          sass: generateLoaders('sass', { indentedSyntax: true }),
          scss: generateLoaders('sass'),
          stylus: generateLoaders('stylus'),
          styl: generateLoaders('stylus')
        }

       

   操作完后記得重啟，還有就是文件里面最好只寫變量和函數，不做實際樣式操作