青蛙小白
博客 / 2017/05

Vue.js：在Vue项目中使用less

2017/05/18 · — 字 · 阅读约 — 分钟 ·
目录

在Vue项目中使用less

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

使用vue-cli创建项目：

vue init webpack-simple vue-less
cd vue-less
npm i

安装webpack支持的less编译包：

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的配置：

module: {
    rules: [
    ......
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      }
    ]
}

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

@bg_color: red;
a {
 color: @bg_color;
}

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

import "./assets/site.less"

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

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

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

参考

评论