VUE中如何引入less

作者: 小太阳可可 | 来源:发表于2018-12-21 17:30 被阅读0次

因为vue-cli 构建的项目默认是不支持 less,所以需要我们手动添加:
步骤如下:

1、安装less 和less-loader
npm install less less-loader --save
2、打开build->webpack.base.conf.js文件,添加如下代码:

{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
位置如下:

module.exports = {
  module: {
    rules: [
      // 此处省略一万个字
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      }
    ]
  },
}
3、完成1,2步骤之后,在页面中就可以用啦!
<style scoped lang="less">
  .wrap{
    background:#f00;
    li{
      list-style: none;
    }
  }
</style>

运行报错处理:
主要原因是less-loader安装版本过高
解决办法:在package.json中替换低版本:"less-loader": "^4.0.5",

相关文章

  • vue里面引入less

    在vue中引入less必须这样引入@import'~common/less/variable';方能成功

  • VUE中如何引入less

    因为vue-cli 构建的项目默认是不支持 less,所以需要我们手动添加:步骤如下: 1、安装less 和les...

  • Vue项目搭建

    一、环境搭建 二、引入依赖包 在vue中引入外部less文件vue 使用less全局变量 三、启动项目 四、配置项...

  • Vue Mint UI webpack Echarts坑 持续

    1.vue中引入less。需要用cnpm install less less-loader --save-dev然...

  • View:在vue中全局加载sass

    如何在vue中引入全局变量?接下来我们一起探索下: 在CSS世界中,SASS/SCSS,LESS,PostCSS是...

  • 全局引入Less

    vue 脚手架默认支持 css loader,但是为了偷懒想用一下 less,由此引入如何配置支持加载 less ...

  • VUE-cl中如何引入less

    因为vue-cli 构建的项目默认是不支持 less,所以需要我们手动添加:步骤如下:1、安装less 和less...

  • vue 引入 less

  • Vue Cli3.0 全局引入 less 变量

    我们开发过程中经常会使用很多 less 变量,但是 vue 文件中想使用 less 变量,就需要挨个引入,极其麻烦...

  • less在vue中的使用

    首先安装过程就不说了,在vue中引入 开始使用①less中变量的使用在less中允许使用以变量的形式来定义定义: ...

网友评论

    本文标题:VUE中如何引入less

    本文链接:https://www.haomeiwen.com/subject/mtkvkqtx.html