一、vue2中安装less并使用

1. 安装依赖包

npm install less less-loader@5 --save-dev

注意：请使用less-loader@5安装less-loader 5.0.0版本，最新版本在vue2中可能无法使用，会报错哦

2、在style标签中添加lang="less"就可以使用less了

<template>
  <div class="hello">
    <h1>Welcome to Your Vue.js App</h1>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@bg: brown;
.hello {
  background: @bg;
  h1 {
    font-weight: normal;
    color: @primary;
  }
}
</style>

二、全局引入less文件

1、安装依赖包

npm install style-resources-loader -D

2、在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
        })
      })
    }

    // 此处为添加的less全局配置代码，其中patterns里路径为需要使用的全局less文件所在的路径
    if (loader == 'less') {
      loaders.push({
        loader: 'style-resources-loader',
        options: {
          patterns: path.resolve(__dirname, '../src/css/*.less')
        }
      })
    }

    // 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)
    }
  }

注意：配置完后需要重新执行npm run dev使配置生效

最后

以上就是震动期待为你收集整理的vue2中使用less，添加全局less样式文件一、vue2中安装less并使用二、全局引入less文件的全部内容，希望文章能够帮你解决vue2中使用less，添加全局less样式文件一、vue2中安装less并使用二、全局引入less文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。