全局引入Less

2018-11-14  本文已影响13人  xo1988

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

上一篇 下一篇

猜你喜欢

热点阅读