在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的