vue-cli2.*中導(dǎo)入公共less文件的方法步驟

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

成都創(chuàng)新互聯(lián)專注于古塔網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供古塔營銷型網(wǎng)站建設(shè)，古塔網(wǎng)站制作、古塔網(wǎng)頁設(shè)計、古塔網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造古塔網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供古塔網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

首先，會用到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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享文章：vue-cli2.*中導(dǎo)入公共less文件的方法步驟
本文來源：http://bm7419.com/article34/gegese.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計、網(wǎng)站維護、微信小程序、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)