在新版的Vue CLI 3中，如何導(dǎo)入公共less文件在文檔里已經(jīng)描述的很清楚了，但是在2.*的版本中，我沒有查到相關(guān)的辦法，網(wǎng)友的辦法又相當復(fù)雜，于是我推薦給大家一個很簡單的辦法。

首先，會用到webpack中的資源預(yù)處理器Style Resources Loader，所以需要：

npm i style-resources-loader -D

然后在build/utils.js文件中可以找到CSS預(yù)處理器的實現(xiàn)方式：

 function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) {  loaders.push({  loader: loader + '-loader',  options: Object.assign({}, loaderOptions, {   sourceMap: options.sourceMap  })  }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) {  return ExtractTextPlugin.extract({  use: loaders,  fallback: 'vue-style-loader'  }) } else {  return ['vue-style-loader'].concat(loaders) } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }}

簡單的看下來就是需要哪種類型的樣式就去加載對應(yīng)的預(yù)處理器，因此只需要在加載less文件的情況下，多加一種Style Resources Loader預(yù)處理器就可以解決問題，所以只要加上如下代碼，即可實現(xiàn)。

 if (loader) {  ... } if(loader == 'less'){  loaders.push({   loader: 'style-resources-loader',   options: {    patterns: path.resolve(__dirname, '../src/assets/config/*.less')   }  }) }

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。