Yeehom Foo

A person deep in tech.

在 Web 应用开发中，CSS 代码的编写是重要的一部分。CSS 规范从最初的 CSS1 到现在的 CSS3，再到 CSS 规范的下一步版本，规范本身一直在不断的发展演化之中。这给开发人员带来了效率上的提高。不过与其他 Web 领域的规范相似的处境是，CSS 规范在浏览器兼容性方面一直存在各种各样的问题。不同浏览器在 CSS 规范的实现方面的进度也存在很大差异。

另外，CSS 规范本身的发展速度与社区的期待还有一定的差距。这也是为什么 Sass 和 Less 等 CSS 预处理语言可以流行的重要原因。Sass 和 Less 等提供了很多更实用的功能，也体现了开发人员对 CSS 语言的需求。还有目前流行的对 CSS 进行处理的工具 PostCSS，依托其强大的插件体系为 CSS 处理增加了无穷的可能性。本文将介绍 Less 在 Vue 中的使用。

Less 是什么

Less 是 CSS 语言的向后兼容扩展。也就是说，Less 是 CSS 的超集，兼容现有 CSS 语法，并提供一些便利的额外功能。

用 Less 来编写 CSS 可以使代码更加简洁优雅，便于扩展和维护。这篇博文将讨论如何在 Vue 中引入 Less。

Less is CSS, with just a little more.

如何引入 Less

本文基于 Vue CLI 构建的项目，介绍如何引入 Less。步骤如下。

1、安装 Less

在代码根目录执行命令安装 Less

npm --save-dev install less less-loader

2、配置路径别名

在 webpack.base.conf.js 中的 resolve 域里增加 less 别名，以后在引入 Less 文件时，可以使用别名 ~less 代替 src/style/less，如：@import '~less/browser-reset.less'。这样做不仅编码方便，也可以防止写错路径。

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'less':resolve('src/style/less'),
    }
  }

3、完成

在 Vue-CLI 构建的项目中，Vue-CLI 会自动帮我们在 utils.js 中引入多种 CSS 加载器，我们无需做任何其他配置，即可使用 Less 编写样式或者 import Less 样式文件到 Vue 中。

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

如何使用 Less

使用 Less，可以用以下两种方式

1、通过 import 直接引入

// main.js
import '~less/el-reset'

上述代码在 main.js 中引入 Less 样式文件，这里引入的样式将作用于全局。一般我们在 main.js 中引入重置页面的或其他需要全局生效的样式文件。

2、通过 style 引入

在单文件 Vue 组件里，可以通过 style 标签引入 Less 样式文件

<!-- Add "scoped" attribute 
to limit CSS to this component only -->
<style lang="less" scoped>
    .namespace {

    }

    .class-name {
        .nest-class-name {
            .namespace()
        }
    }
</style>