美文网首页vueShow Me The Code
webpack + vue 全局共享使用less变量的解决方案

webpack + vue 全局共享使用less变量的解决方案

作者: Quincy_X | 来源:发表于2017-08-02 14:17 被阅读862次

    vue-cli生成的工程下,样式使用了less语言,其中定义了一些全局变量,比如常用颜色,便于样式切换。

    //theme.less
    
    @main: #fff;
    @sub: #fff;
    @border: #fff;
    @grey: #fff;
    

    但是Vue单文件组建内,less变量不能共享和继承。
    每个文件都要@import一遍也挺麻烦的。

    不完美解决方案如下:

    在./build/utils.js中
    首先添加getLessVariables方法

    ....
    function getLessVariables(file) {
      var themeContent = fs.readFileSync(file, 'utf-8')
      var variables = {}
      themeContent.split('\n').forEach(function (item) {
        if (item.indexOf('//') > -1 || item.indexOf('/*') > -1) {
          return
        }
        var _pair = item.split(':')
        if (_pair.length < 2) return;
        var key = _pair[0].replace('\r', '').replace('@', '')
        if (!key) return;
        var value = _pair[1].replace(';', '').replace('\r', '').replace(/^\s+|\s+$/g, '')
        variables[key] = value
      })
      return variables
    }
    ....
    

    然后给less-loader配置config

    function generateLoaders(loader, loaderOptions) {
      ....
      return{
        ....
        less: generateLoaders('less', {
          modifyVars: getLessVariables('./src/style/theme.less')
        }),
        ....
      }
      ...
    }
    

    这样就能做到全局共享一个theme.less文件里的变量了。

    但是
    这个方法并不能实现热更新,修改theme后需要手动重启npm run dev

    提前把变量都写好吧

    完美解决方案如下:

    使用sass的sass-resources-loader,也可以兼容less

    ./build/utils.jsexports.cssLoaders = function (options) { ... }中添加generateLessResourceLoader方法

    function generateLessResourceLoader() {
        var loaders = [
          cssLoader,
          'less-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                path.resolve(__dirname, '../src/style/theme.less'), 
                path.resolve(__dirname, '../src/style/mixins.less')
              ]
            }
          }
        ];
        if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
      }
    

    然后把下边的

    less: generateLoaders(),
    

    替换成

    less: generateLessResourceLoader('less'),
    

    即可

    这个方法可以完美实现全局less变量共享,和修改变量后的热重载。

    相关文章

      网友评论

        本文标题:webpack + vue 全局共享使用less变量的解决方案

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