How to import iview-variables.less in components?

[mudin]

Hello, I would like to use variables in components like color:@primary-color. But it is undefined without importing iview-variables.less file. it is increasing the size of components and it is not good experience to import the global less file in every single components, especially the number of the components are so much. It should be other way. Why is one time importing in plugins/iview.js not enough? How to import iview-variables.less file globally?

[mudin]

I got the solution! I had to do this in vue.config.js file:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
  chainWebpack: (config) => {
    const types = ['vue'];
    // eslint-disable-next-line no-use-before-define
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)));
  }
};

function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/custom/variables.less')
      ]
    });
}