鍍金池/ 問答/HTML/ 如何才能在vue腳手架中配置less呢?

如何才能在vue腳手架中配置less呢?

使用命令

vue init webpack 項(xiàng)目名

創(chuàng)建完成項(xiàng)目后,想要加入less來(lái)編譯樣式,看到在build/utils.js配置中有

 // generate loader string to be used with extract text plugin
  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')
  }
}

配置信息,但是現(xiàn)實(shí)是無(wú)法使用less,并報(bào)

This dependency was not found:

* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader /lib/style-compiler/index?{"vue":true,"id":"data-v-52992b45","scoped":false,"has InlineConfig":false}!less-loader?{"sourceMap":true}!../less/main.less in ./src/c omponents/searchOutlet.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"s ourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":tr ue,"id":"data-v-52992b45","scoped":false,"hasInlineConfig":false}!less-loader?{" sourceMap":true}!../less/main.less

但是vue-style-loader和css-loader都已經(jīng)配置過了,

npm install less --save-dev  
 npm install less-loader --save-dev  

并且加載了請(qǐng)問如何才能對(duì)less進(jìn)行正確的配置呢?

回答
編輯回答
孤客

問題已經(jīng)解決,不需要修改配置文件,直接在vue頁(yè)面中引用就可

2017年1月12日 02:56