美文网首页
全局引入Less

全局引入Less

作者: xo1988 | 来源:发表于2018-11-14 16:23 被阅读13次

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

道理都懂,操作也很简单

  1. 安装loader包,注意这里使用的是 sass-resources-loader
npm install sass-resources-loader --save-dev

2.在 build/utils.js 中的 cssLoaders 里边添加以下代码

function lessResourceLoader() {
    var loaders = [
      cssLoader,
      'less-loader', // 这个是解析less用的,不能少
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname, '../src/assets/css/*.less'),
          ]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

同时修改其中的 less 配置

less: lessResourceLoader(), // generateLoaders('less') 默认是这个

之后就能够开心的在 assets/css下加任意多的less文件了

[参考]https://www.jianshu.com/p/2d569644c996

相关文章

  • 全局引入Less

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

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

    Vue Cli3.0 全局引入 less 变量 首先定义一个全局 less 样式文件,eg: global.les...

  • css】全局css文件

    引入全局css或者less文件 在main.js里直接引入 所有的全局样式都可以在这引入。 在index.html...

  • Vue项目搭建

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

  • vue 全局引入common.less

    全局引入common.less,并全局使用里面的变量,默认是不行的,只能每个文件去引入后来找个文章vue-cli中...

  • Vue: 引入全局less 变量

    转自:https://blog.csdn.net/hani_wen/article/details/8100785...

  • Vue: 引入全局less 变量

    安装依赖: 适用于sass,less等引入全局文件。 在build 的utils.js中的 中加上以下代码:然后将...

  • js -- vue-cli添加less全局配置

    vue-cli添加less全局配置 项目老是引入css变量好麻烦, 加入全局配置就方便多了。 代码如下: 修改文件...

  • missing semi-colon or unrecognis

    原因: vite.config.js里引入全局less文件没有加分号。 转载:https://www.cnblog...

  • Webpack引入Less全局变量

    问题描述: 定义了公共变量以及函数的.less文件,在.vue文件中使用只能一个一个引入.文件少还好,如果几十个v...

网友评论

      本文标题:全局引入Less

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