vue中引入全局less的问题分析

forJD

问题描述

现状：在hotel项目中，用less作为css预处理器，现在src/assets/css目录下有common.less文件，需要在每个组件中显式引入。

期望：现想在全局引入一个less文件，其中的变量及mixin等便可在各子组件得以访问，不必主动引入。

方案尝试

• 方案一：在main.js中引入common.js

require('!style-loader!css-loader!less-loader!./assets/css/common.less');

结果：子组件中无法访问到common.less

• 方案二：在顶层组件App.vue中引入common.less。

结果：子组件中无法访问到common.less

• 方案三：根据github中一个关于引入全局sass的issue，在build/utils.js中对less-loader增加类似配置

let lessOptions = {
    includePaths: [
        '../src/assets/css'
    ],
    data: '@import "~common.less";'
}
···
 return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less', lessOptions),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

结果：子组件中无法访问到common.less

• 方案四：尝试更新vue-loader、css-loader、less-loader的package版本，重新更新配置。

结果：依旧达到预期效果

分析与结论

在此整理一些论坛、文章中关于此问题的延伸与观点。

• 在使用sass时，可以使用sass-resources-loader，其专为解决全局sass文件引入而生，以下摘自其在GitHub上的readme.md。

  This loader will @import your SASS resources into every required SASS module. So you can use your shared variables & mixins across all SASS styles without manually importing them in each file. Made to work with CSS Modules!

  经配置，在less中使用无效，虽然官网中说不限于sass。

• 在使用stylus时，可以使用import引入全局变量的目的。
• 在使用less时，暂时没有找到解决方法，似乎只能每次手动引入，将引入路径改为别名引入，介于操作代价较小，在需要引入的组建中维持如下实现方式：

@import '~assets/css/common.less';

可实践的方案

可以为less-loader在加载时注入全局变量。

方案思路

loader: "less-loader", 
options: {
    globalVars: {
       'primary-color': 'blue'
    }
}

这样做对于全局变量的添加是生效的，为了方便后期配置维护，可以将所有需要的全局变量存入一个less文件，然后解析注入到配置项中。

下面是本次在hotel项目中，对于以上方案的实现。

hotel中的改造记录

1、首先在webpack.base.conf.js文件的vue-loader配置项中，添加cssLoader的相关处理配置，即添加第9行。

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      js: 'babel-loader',
      postcss: [
        require('autoprefixer')()
      ],
      loaders: utils.cssLoaders()
    }
  }

2、对utils.js中cssLoaders方法的返回值增加对于less的配置。(第4、5、6行)

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less',{
        globalVars: getLessVariables(config.themePath)// 读取less全局变量文件
    }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

3、同时在cssLoaders方法中加入读取less全局变量文件的方法

  // 读取less全局变量文件
  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
  }

4、最后在assets/css目录下添加全局less变量文件theme.less。(注意遵循命名规范)

// 请以'g-'开头命名，以区分全局与局部less变量
@g-primary-color: grey;

使用用例

在之后的开发使用上，只需要维护theme.less文件，以及在需要引入全局变量的地方引入即可。如下：

.mainColor {
    color: @g-primary-color;
}

需要注意的是，theme.less文件的加载时机是在webpack打包前，所以只加载一次，不支持热更新（HMR），更改theme.less文件后，需要重启服务以生效。

参考文档1
参考文档2