在Vue项目中使用less

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

使用vue-cli创建项目:

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

安装webpack支持的less编译包:

1
npm 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的配置:

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

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

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

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

1
import "./assets/site.less"

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

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

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

参考