当前位置 : 主页 > 网页制作 > html >

20. Vue-cli项目使用less

来源:互联网 收集:自由互联 发布时间:2021-06-12
记录下style的less方式的使用方法。 1.安装 less 和 less-loader : npm install less less-loader --save-dev 2.打开 build/webpack.base.conf.js , module.exports = 的对象的 module.rules 后面添加一段: { test: /\.less$/

记录下style的less方式的使用方法。

1.安装 less 和 less-loader :

  npm install less less-loader --save-dev

2.打开 build/webpack.base.conf.js , module.exports = 的对象的 module.rules 后面添加一段:

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

3.使用方法,如图所示:

分享图片

4.引入外部less文件则在style标签之后引入 @import ‘./index.less‘,如下列代码:

 

<style lang="less">
  @import ‘./index.less‘;  //引入全局less文件
</style>
网友评论