vue-cli 2.* 中匯入公共less檔案
阿新 • • 發佈:2018-12-15
在新版的Vue CLI 3中,如何匯入公共less檔案在文件裡已經描述的很清楚了,但是在2.*的版本中,我沒有查到相關的辦法,網友的辦法又相當複雜,於是我推薦給大家一個很簡單的辦法。
首先,會用到webpack中的資源前處理器Style Resources Loader,所以需要:
npm i style-resources-loader -D
然後在build/utils.js檔案中可以找到CSS前處理器的實現方式:
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') } }
簡單的看下來就是需要哪種型別的樣式就去載入對應的前處理器,因此只需要在載入less檔案的情況下,多加一種Style Resources Loader前處理器就可以解決問題,所以只要加上如下程式碼,即可實現。
if (loader) { ... } if(loader == 'less'){ loaders.push({ loader: 'style-resources-loader', options: { patterns: path.resolve(__dirname, '../src/assets/config/*.less') } }) }