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的

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

参考

标题:Vue.js:在Vue项目中使用less
本文链接:https://blog.frognew.com/2017/05/vuejs-using-less.html
转载请注明出处。

目录