Vue2 中如何使用 less

一、Vue2中安装less并在组件中使用

1. 安装依赖包

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

安装less-loader 5.0.0版本，最新版本在vue2中可能无法使用

2. 在 style 标签中添加 lang="less"

<template>
  <div>
    <p>less:</p>
    <p class="p">使用添加<span>字体红色</span>背景颜色</p>
  </div>
</template>

<script>
export default {
  name: "LessComp",
};
</script>

<style lang="less" scoped>
  @bg: blue;
  @primary: red;
  .p{
    background: @bg;
    span{
      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全局配置代码
    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)
    }
  }

3. 重新执行 npm run dev