欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年11月22日 14:49:21   作者：Callas  
這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

npm i style-resources-loader -D

然后在build/utils.js文件中可以找到CSS預(yù)處理器的實(shí)現(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')
 }
}

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論