美文网首页
全局引入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

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