在Vue项目中使用less

Less是一个CSS预编译器，它扩展了CSS语言添加了变量(variables),混合(mixins),函数(functions)等特性。 下面演示在Vue项目中使用less.

使用vue-cli创建项目：

1vue init webpack-simple vue-less
2cd vue-less
3npm i

安装webpack支持的less编译包：

1npm i less style-loader css-loader less-loader -D
  • 参数-D -D, --save-dev: Package will appear in your devDependencies.
  • package.json中的devDependencies中会出现这几个依赖。

在webpack.config.js的module中添加下面关于less的配置：

1module: {
2    rules: [
3    ......
4      {
5        test: /\.less$/,
6        loader: "style-loader!css-loader!less-loader"
7      }
8    ]
9}

在/assets/下创建一个site.less文件：

1@bg_color: red;
2a {
3 color: @bg_color;
4}

在Vue组件中如App.vue的内引入这个less样式表:

1import "./assets/site.less"

在<script>中使用import导入的less文件，实际上webpack会使用less-loader将生成的css代码插入到页面<head>标签中的style标签中，这样import的样式应用于页面全局。 有的时候我们可能只需要将样式应用于当前的组件，可以使用<style scoped>标签，然后在其中使用CSS的@import导入less文件:

1<style scope>
2  @import "./assets/my.less"
3</style>

关于less的使用可以参考less get started。

参考